モーダルで画像・動画を表示！「fancybox3」を使ってみた

自身のポートフォリオ作品（画像）を、ページ遷移ではなくモーダル表示にしたかったので、探してみたところ、「Fancybox3」というモバイルも対応している超優れものを見つけたので、さっそく実装してみました。

◆Fancybox3のサイトはこちら
https://fancyapps.com/fancybox/3/

①ダウンロード

まずは「fancyBox3」のサイトから、データをダウンロードします。
ダウンロード後、自身のローカルリポジトリ内へ読み込み。

ちなみに、

HTML

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

こちらをHTML内に記述しても実装できました。

②HTMLを記述

HTML

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

こちらをHTML内に記述したら、なんということでしょう、、あっという間に実装されました！

私はモーダルを表示させた後にキャプションをつけたかったので、

HTML

<a data-fancybox="gallery" href="big_1.jpg" data-caption="****"><img src="small_1.jpg"></a>

とdata-captionをつけてあげたら、表示されました◎

参考サイト様

モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。