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

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

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

## 1. 準備

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

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

### ❶Githubレポジトリからファイルをダウンロードする
GitHubレポジトリからZipファイルをダウンロードし、解凍します。
![スクリーンショット 2023-12-01 22.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/ca810b70-e517-caef-0fe7-52e373b4b7fa.png)

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

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

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

```html
<!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に記述する
```html
<a class="popup-link" href="lightbox-img.jpg">
  <img src="thumb-img.jpg">
</a>
```

js：ライトボックスを適応する（画像なのでtypeオプションはimage）
```javascript
$('.popup-link').magnificPopup({
  type: 'image',
  //オプションをここに記載
});
```

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

html：画像を複数用意する（parent-containerで囲いました）
```html
<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：下記のようにオプションを付け足す
```javascript
$('.popup-gallery').magnificPopup({
  delegate: 'a', //子要素であるaタグを対象とする
  type: 'image',
  gallery: { enabled: true }, //ギャラリー化する
});
```

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

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

![スクリーンショット 2023-12-01 23.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/623a0f1e-7b42-5e1c-accd-bd965c56589a.png)

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

css：下記のコードを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オプションに設定する

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

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

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

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

### コンテンツタイプ「image」
**imageタイプ**は今までやってきたこれですね。
![スクリーンショット 2023-12-02 0.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/63d23bcd-d35a-ee7d-b2c3-2c950ade7a3e.png)

### コンテンツタイプ「inline」
**inlineタイプ**では、html要素を次のように表示できます。
![スクリーンショット 2023-12-02 0.17.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/dd4a5f16-65c2-c696-a6af-c1456badd5a7.png)

html：
ポップアップされる部分はhtmlで記述しますが、**mfp-hideクラス**で隠しておきます。
ボタンをクリックすると、隠していたコンテンツを表示します。
＊mfp-hideクラスはあらかじめ用意されているクラスです。
```html
<!-- ボタン -->
<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に変更。閉じるボタンの設定もしておく（任意）。
```javascript
$('.popup').magnificPopup({
  type: 'inline',
});
// 閉じるボタン
$('.close').on('click', function (e) { 
  e.preventDefault();
  $.magnificPopup.close();
});
```

### コンテンツタイプ「iframe」
**iframeタイプ**では、次のように**動画**を表示できます。
![スクリーンショット 2023-12-02 0.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/c0bf543a-1f16-f1d1-2f67-e84e40158eac.png)

**iframeタイプ**では、次のように**WEBサイト**も表示できます。
![スクリーンショット 2023-12-02 0.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576061/39f0dbc6-a79a-19ea-154f-26abd61956dc.png)

html：href属性でリンク先をyoutube/WEBサイトにすればOK
```html
<!-- 動画 -->
<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に変更。オプションも付け加えた。
```javascript
$('.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以下でポップアップを無効にしています。
＊画面幅が小さすぎるとポップアップする必要性がなくなるからです
```javascript
disableOn: 500
```

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

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

### preloader（初期値：true）
ポップアップのロード時、ロード成功時、ロード失敗時のクラスを付与することができます。
```css
/* コンテンツがローディング中につくクラス */
.mfp-s-loading { }

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

/* コンテンツのローディングが失敗した場合につくクラス */
.mfp-s-error { }
```
例えばエラー時にメッセージを赤色にしたい場合は以下のように記述します。
```css
.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を使ってみてください！