アマゾンプライムデー開催中!6/22まで 

Magnific Popupで画像&インラインのポップアップギャラリーを作る

オプションで色んな使い方ができるjQueryプラグインMagnific PopupでLightboxのようなポップアップギャラリーの作り方を紹介します。

事前準備

Magnific Popupのサイトから必要なファイルをダウンロードして読み込みます。

<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="magnific-popup/jquery.magnific-popup.js"></script>

画像ギャラリー

See the Pen
Magnific Popup – Image gallery
by kura (@kuranopen)
on CodePen.

ポップアップさせたい画像をリンク先に指定するシンプルな画像ギャラリーです。

HTML

<div class="gallery">
<a href="https://picsum.photos/id/237/960/540">image1</a>
<a href="https://picsum.photos/id/238/960/540">image2</a>
<a href="https://picsum.photos/id/239/960/540">image3</a>
<a href="https://picsum.photos/id/240/960/540">image4</a>
<a href="https://picsum.photos/id/241/960/539">image5</a>
</div>

Javascript

$(".gallery").magnificPopup({
  type: "image", //画像ギャラリーを定義
  delegate: "a", //リンク先を含む子要素を指定
  gallery: {
    enabled: true, //ギャラリーを有効可
  }
});

インラインギャラリー

See the Pen
Magnific Popup – Image gallery
by kura (@kuranopen)
on CodePen.

ページ内のHTMLをギャラリーとして使用するインラインギャラリーです。

HTML

<!-- ポップアップ一つ -->
<button href="#popup">popup</button>
<div id="popup" class="popup-box mfp-hide">ポップアップ</div>


<!-- ポップアップ複数 -->
<a href="#popup1">popup 1</a>
<a href="#popup2">popup 2</a>
<a href="#popup3">popup 3</a>

<div id="popup1" class="popup-box mfp-hide">popup 1</div>
<div id="popup2" class="popup-box mfp-hide">popup 2</div>
<div id="popup3" class="popup-box mfp-hide">popup 3</div>
  • .mfp-hide ギャラリーに表示する要素に指定。ページ上で非表示/ポップアップで表示を切り替えてくれます。

CSS

.popup-box {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

ポップアップで表示された要素はスタイルがない状態なので、最低限のスタイルを指定します。

Javascript

//単一ポップアップ
$("button").magnificPopup({
  type: "inline",
  gallery: {
    enabled: true,
  }
});

// 複数ポップアップ
$("a").magnificPopup({
  type: "inline",
  gallery: {
    enabled: true,
  }
});
  • type: "inline", インラインギャラリーを使用する場合に指定します。

【開催中】お得情報

  • このエントリーをはてなブックマークに追加