自身のポートフォリオ作品（画像）を、ページ遷移ではなくモーダル表示にしたかったので、探してみたところ、「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><linkrel="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
<adata-fancybox="gallery"href="big_1.jpg"><imgsrc="small_1.jpg"></a><adata-fancybox="gallery"href="big_2.jpg"><imgsrc="small_2.jpg"></a>こちらをHTML内に記述したら、なんということでしょう、、あっという間に実装されました！
私はモーダルを表示させた後にキャプションをつけたかったので、
HTML
<adata-fancybox="gallery"href="big_1.jpg"data-caption="****"><imgsrc="small_1.jpg"></a>とdata-captionをつけてあげたら、表示されました◎
