Magnific Popupでライトボックスを作ってみた

Magnific Popupはライトボックスの一種で、写真をその場で拡大表示するためのオープンソースライブラリです。MITライセンスで配布されています。

準備
基本的な使い方
2-1 画像単体の表示
2-2 画像複数（ギャラリー）の表示
2-3 表示/非表示のアニメーションを加える
選べるコンテンツの種類
3-1 コンテンツタイプ「image」
3-2 コンテンツタイプ「inline」
3-3 コンテンツタイプ「iframe」
3-4 コンテンツタイプ「ajax」
選べるオプションの種類

1. 準備

公式サイト
https://dimsemenov.com/plugins/magnific-popup/

ドキュメント
https://dimsemenov.com/plugins/magnific-popup/documentation.html#including-files

❶Githubレポジトリからファイルをダウンロードする

GitHubレポジトリからZipファイルをダウンロードし、解凍します。

❷distフォルダを確認する

Zipファイルを解凍したら、その中のdistディレクトリ確認してみてください。
以下の2つが入っているはずなので自分のプロジェクト内に配置しましょう。

jquery.magnific-popup.min.js
magnific-popup.css

❸htmlに記述する

htmlが以下のようになっていればOKです！
Magnific PopupはjQueryのプラグインなので、jQueryの読み込みも忘れないでください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magnific Popup</title>
  <!-- Magnific Popup -->
  <link rel="stylesheet" href="magnific-popup.css">
</head>
<body>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <!-- Magnific Popup -->
  <script src="jquery.magnific-popup.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

2. 基本的な使い方

画像単体の表示

画像をクリックすると、リンク先の画像がポップアップされるようにします。

html：クリックする画像をimgに、クリック先をhrefに記述する

<a class="popup-link" href="lightbox-img.jpg">
  <img src="thumb-img.jpg">
</a>

js：ライトボックスを適応する（画像なのでtypeオプションはimage）

$('.popup-link').magnificPopup({
  type: 'image',
  //オプションをここに記載
});

画像複数の表示（ギャラリー）

複数の画像をギャラリー表示したい場合は、galleryオプションとdelegateオプションを使いこなせれば大丈夫です。

html：画像を複数用意する（parent-containerで囲いました）

<div class="popup-gallery">
  <a href="lightbox-img-01.jpg">
    <img src="thumb-img-01.jpg" />
  </a>
  <a href="lightbox-img-02.jpg">
    <img src="thumb-img-02.jpg" />
  </a>
  <a href="lightbox-img-03.jpg">
    <img src="thumb-img-03.jpg" />
  </a>
</div>

js：下記のようにオプションを付け足す

$('.popup-gallery').magnificPopup({
  delegate: 'a', //子要素であるaタグを対象とする
  type: 'image',
  gallery: { enabled: true }, //ギャラリー化する
});

表示/非表示のアニメーションを加える

ポップアップが表示/非表示する際に、アニメーションがまだついていません。
今回はフェードイン/フェードアウトのアニメーションを加えてみましょう。

まずはアニメーションの対象となるのは、オーバーレイとコンテンツの２箇所なので、念頭に入れておきましょう。

配布ドキュメントのAnimationという章に記載されていた部分を抜粋しました。
https://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

css：下記のコードをCSSファイルにコピペする

/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

js：CSSファイルにコピペしたmfp-fadeクラスをmainClassオプションに設定する

$('.popup-gallery').magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery: { enabled: true },
  mainClass: 'mfp-fade', //フェードインアウトについてクラスを設定
  removalDelay: 300, //ポップアップが閉じるときの遅延時間を設定
});

3. 選べるコンテンツの種類

ポップアップの対象は画像だけではありません。
他にも以下のようなポップアップが実現できます。

画像＋テキスト
動画
WEBサイト
Ajax（＊私のこれについて理解が深くないので割愛します）

コンテンツタイプ「image」

imageタイプは今までやってきたこれですね。

コンテンツタイプ「inline」

inlineタイプでは、html要素を次のように表示できます。

html：
ポップアップされる部分はhtmlで記述しますが、mfp-hideクラスで隠しておきます。
ボタンをクリックすると、隠していたコンテンツを表示します。
＊mfp-hideクラスはあらかじめ用意されているクラスです。

<!-- ボタン -->
<a class="popup" href="#inline-wrap">インライン情報を表示</a>
<!-- ボタンをクリックしたら表示される部分 -->
<div id="inline-wrap" class="mfp-hide">
  <h3>画像とテキストを表示</h3>
  <div><img src="./img/kitten4.jpg"></div>
  <p>キャプションを付けたい時なんかに便利です。</p>
  <a class="close" href="#">閉じる</a>
</div>

js：typeはinlineに変更。閉じるボタンの設定もしておく（任意）。

$('.popup').magnificPopup({
  type: 'inline',
});
// 閉じるボタン
$('.close').on('click', function (e) { 
  e.preventDefault();
  $.magnificPopup.close();
});

コンテンツタイプ「iframe」

iframeタイプでは、次のように動画を表示できます。

iframeタイプでは、次のようにWEBサイトも表示できます。

html：href属性でリンク先をyoutube/WEBサイトにすればOK

<!-- 動画 -->
<a class="popup-iframe" href="https://youtu.be/DHfRfU3XUEo?si=vr5O_atoJjD-YzZp">YouTube動画</a>
<!-- WEBサイト -->
<a class="popup-iframe" href="https://dimsemenov.com/plugins/magnific-popup/documentation.html#including-files">Webページ</a>

js：typeをiframeに変更。オプションも付け加えた。

$('.popup-iframe').magnificPopup({
  type: 'iframe',
  preloader: true, //コンテンツがない場合「The image could not be loaded.」と表示
  disableOn: 500, // 500px以下ではMagnific Popupを無効にしている
});

コンテンツタイプ「ajax」

外部ファイルを表示させることができます。
私自身の理解が追いついていないので、詳しくは他の方のブログをあたってみてください。

4. 選べるオプションの種類

オプションについてもっと詳しく知るにはドキュメントを参照してください。
https://dimsemenov.com/plugins/magnific-popup/documentation.html#options

type

ポップアップコンテンツの種類を設定します。
image：画像
inline：html要素（画像＋テキストなどが可能）
iframe：動画やWEBサイト
ajax：外部ファイル

disableOn

ビューポート幅によって、ポップアップを有効/無効にします。
以下は幅500px以下でポップアップを無効にしています。
＊画面幅が小さすぎるとポップアップする必要性がなくなるからです

disableOn: 500

midClick

マウスの真ん中にあるボタンをクリックしてポップアップを表示できるようになります。Command/Ctrlキーでも反応するようになります。

mainClass

クラスを設定できます。
先ほどはmfp-fadeクラスを設定してアニメーションをつけました。

mainClass: 'mfp-fade'

preloader（初期値：true）

ポップアップのロード時、ロード成功時、ロード失敗時のクラスを付与することができます。

/* コンテンツがローディング中につくクラス */
.mfp-s-loading { }

/* コンテンツのローディングが成功した場合につくクラス */
.mfp-s-ready { }

/* コンテンツのローディングが失敗した場合につくクラス */
.mfp-s-error { }

例えばエラー時にメッセージを赤色にしたい場合は以下のように記述します。

.mfp-s-error .mfp-preloader {
  color: red;
}

focus

ポップアップ内にinput要素がある場合は、そこにフォーカスが当たるようになります。

closeOnContentClick

ポップアップのコンテンツをクリックすると、ポップアップが閉じます。
ポップアップが画像だけの場合などはつけることが推奨されています。

closeOnBgClick（初期値：true）

ポップアップのオーバーレイ部分をクリックすると、ポップアップが閉じます。

closeBtnInside（初期値：true）

ポップアップコンテンツの右上に閉じるボタンが配置されます。

showCloseBtn（初期値：true）

閉じるボタンの表示の有無を設定します。

enableEscapeKey（初期値：true）

ESCAPEキーでポップアップを閉じます。

modal

モーダルのように動きます。つまりESCAPEキー、閉じるボタン、オーバーレイにクリックをしてもポップアップは閉じなくなります。

alignTop

ポップアップが真ん中ではなく上に配置されます。

index

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

fixedContentPos（初期値：auto）

ポップアップコンテンツのポジションをfixedで固定します。

fixedBgPos（初期値：auto）

fixedContentPosと同じで、背景オーバーレイのpositionを設定します。

overflowY（初期値：auto）

ポップアップのスクロールバーを設定できます。cssプロパティの「overflow-y」として機能します。

removalDelay

ポップアップが閉じるのを遅延させます。

autoFocusLast（初期値：true）

ポップアップを表示する前にフォーカスしていた場所に、ポップアップを閉じたときにまたフォーカスを戻します。

まとめ

Magnific Popupが行っていることは非常に簡単です。

①aタグをクリック→②ポップアップしたいものを表示

そこにオプションで細かい設定を行っているだけです。

是非ライトボックスを実装する際は、Magnific Popupを使ってみてください！

【Magnific Popup】ライトボックスを作ってみた