こんにちは!あっという間に5月も終わりです。
今回はmagnific-popupを使用してページ内の画像のポップアップギャラリーを作成します。
さっそく実装方法!
magnificpopup実装方法
magnificpopupのCDNで以下をhead内に読み込ませます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
【公式サイトとJSのダウンロードをする方はこちらから】
HTMLは結構シンプルな感じです。
今回はフォトコンテストの結果発表というイメージでHTMLのソースをつくっています。
cssは好きなように整えてください。
<div class="gramp" id="gramp01"> <h3 class="crown1"><i class="fas fa-crown"></i> 推 薦</h3> <div class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon01.jpg"> <img src="../images/photocon/photocon01.jpg" alt="推薦"> </a> <h4>写真タイトル</h4> <p>○○市/T 様</p> </div> </div> <div class="gramp" id="gramp02"> <h3 class="crown2"><i class="fas fa-crown"></i> 特 選</h3> <div class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon02.jpg"> <img src="../images/photocon/photocon02.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/X 様</p> </div> <div class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon03.jpg"> <img src="../images/photocon/photocon03.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/Y 様</p> </div> </div> <div class="gramp" id="gramp03"> <h3 class="crown3">入 選</h3> <ul class="flexbox fww"> <li class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon04.jpg"> <img src="../images/photocon/photocon04.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/B 様</p> </li> <li class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon05.jpg"> <img src="../images/photocon/photocon05.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/C 様</p> </li> <li class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon06.jpg"> <img src="../images/photocon/photocon06.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/D 様</p> </li> <li class="parent-container wow fadeInUp"> <a class="thumbnail gallery" href="../images/photocon/photocon07.jpg"> <img src="../images/photocon/photocon07.jpg" alt="特選"> </a> <h4>写真タイトル</h4> <p>○○市/E 様</p> </li> </ul> </div>
さらに別でJSを記載します。
$(function(){ $('.parent-container').magnificPopup({ delegate: 'a', type: 'image', gallery: {//ギャラリー表示にするかどうか enabled:true } }); });
ここではaタグに付与したクラス名をjQueryで指定します。
これであっというまにギャラリーになってくれます。
実際の実装が以下です。
See the Pen popupgallery by sayuri (@giraffeweb) on CodePen.0
magnificpopupのデフォルトのアイコンが気に入らないので…
下記cssにて自分好みにカスタマイズしました。笑
.mfp-content { position: static !important; } .mfp-figure:after { content: none !important; } .mfp-close { font-size: 100px !important; right: 15px !important; top: 15px; } .mfp-arrow-left:before { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 0; width: 50px; height: 50px; border: none; border-right: 0; border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .mfp-arrow-left:after, .mfp-arrow-right:after{ content: none; } .mfp-arrow-right:before { content: ""; position: absolute; right: 0; top: 50%; margin: -10px 50% 0 0; width: 50px; height: 50px; border: none; border-left: 0; border-right: 3px solid #ffffff; border-top: 3px solid #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
そうすると下記のようになります!
See the Pen popupgallery customize by sayuri (@giraffeweb) on CodePen.0
みなさんもぜひ試してみてくださいね~