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 – popup
by kura (@kuranopen)
on CodePen.

【方法1】要素を直接指定

HTML

<a class="popup" href="https://picsum.photos/id/237/960/540">popup 1</a>
<a class="popup" href="https://picsum.photos/id/238/960/540">popup 2</a>
<a class="popup" href="https://picsum.photos/id/239/960/540">popup 3</a>

hrefにポップアップさせたい画像のパス、URLを指定します。

Javscript

$('.popup').magnificPopup({
  type: 'image'
});

ポップアップリンクのクラスを指定します。
ここでは.popupを指定しています。

【方法2】親要素で指定

親要素で一括指定することもできます。

HTML

<div class="popups">
    <a href="https://picsum.photos/id/237/960/540">popup 1</a>
    <a href="https://picsum.photos/id/238/960/540">popup 2</a>
    <a href="https://picsum.photos/id/239/960/540">popup 3</a>
</div>

Javascript

$('.popups').magnificPopup({
  type: 'image',
  delegate: 'a', //子要素を指定。クラス「.class」のセレクタ指定も可
});

画像ギャラリー

ギャラリー機能を使って画像をポップアップで表示します。
「次へ」、「前へ」機能があります。

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", インラインギャラリーを使用する場合に指定します。

オプション

Magnific Popupで使用できるオプションです。
一部翻訳された説明文を記載しています。

disableOn

ウィンドウ幅がこのオプションの数値よりも小さい場合、ライトボックスは開かれず、要素のデフォルトの動作がトリガーされる。

key

同じ構造のポップアップの単一またはグループの一意の識別子。定義しない場合はポップアップを開いたり閉じたりするたびにDOM要素が作成および破棄される。

midClick

trueライトボックスに設定されている場合、ユーザーがマウスの中ボタンをクリックするか、Command / Ctrlキーでクリックすると開きます。

mainClass

ポップアップラッパーのルート要素とダークオーバーレイに追加されるクラスを含む文字列。たとえば”myClass”、には複数のクラスを含めることもできます。

preloader

Magnific Popupのプリローダーは、現在のステータスのインジケーターとして使用されます。

focus

フォーカスする必要があるポップアップ内の要素のCSSセレクターを含む文字列。理想的には、フォーカスできるポップアップの最初の要素である必要があります。たとえば、’input’または’#login-input’。ポップアップ自体に焦点を合わせるには、空のままにします。

closeOnContentClick

ユーザーがポップアップのコンテンツをクリックすると、ポップアップを閉じます。ポップアップに画像しかない場合は、このオプションを有効にすることをお勧めします。

closeOnBgClick

ユーザーが暗いオーバーレイをクリックしたときにポップアップを閉じます。

closeBtnInside

有効にすると、Magnific Popupはポップアップのコンテンツ内に閉じるボタンを配置し、ラッパーはクラスを取得mfp-close-btn-inします。

showCloseBtn

閉じるボタンの表示、非表示。

enableEscapeKey

Escキーを押すと、アクティブなポップアップを閉じるかどうか。

modal

trueを指定するとモーダルのような動作になる。

alignTop

trueを指定すると中央ではなく上に配置される。

index

ギャラリーに使用されます。開始インデックスを定義します。ポップアップがDOM要素から初期化される場合、このオプションは無視されます。

fixedContentPos

ポップアップコンテンツの位置。

fixedBgPos

上記のオプションと同じですが、暗い半透明オーバーレイの位置プロパティを定義。

overflowY

オーバーフロー-yのCSSプロパティとして機能し、ポップアップのスクロールバー-任意のCSS許容値が許可されている

removalDelay

ポップアップがDOMから削除されるまでの遅延。アニメーションに使用される。

closeMarkup

閉じるボタンのマークアップ。

prependTo

ポップアップが追加されるDOM要素。

autoFocusLast

ポップアップが表示される前に最後にフォーカスされた要素に設定されている場合、ポップアップが閉じた後にフォーカスされます。

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

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。