magnificpopupでページ内の画像のポップアップギャラリーを作成してみる

こんにちは！あっという間に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のダウンロードをする方はこちらから】

Magnific Popup

Magnific Popup 配布サイト

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

みなさんもぜひ試してみてくださいね～

Share: