モーダル表示で前後への移動も可能な画像ギャラリーを実装するにはこのjQueryプラグインが一番な気がします。オプションも豊富で使い方全部書いてたら大変なので個人的にこれが便利！と思ったポイントを上げていこうと思います。
用意するもの
コアファイルは公式からダウンロードします。
必須なファイルはダウンロードしたディレクトリのdistの中に入っている下記のファイルたちです。jQueryはCDNでも良いですしローカルでダウンロードしたものでも良いでしょう。
<head> <link rel="stylesheet" href="jquery.fancybox.min.css" /> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.fancybox.min.js"></script> </head>
基本的な使い方
１つのギャラリーとしてまとめる方法は非常に簡単で、ひとかたまりとして扱いたい要素に対してdata-fancybox属性を指定するだけです。１ページに複数のギャラリーを設置したい場合も属性の値を別々にすれば、それぞれ独立したギャラリーになります。
<a data-fancybox="gallery" href="sample1_l.jpg"><img src="sample1_thum.jpg"></a> <a data-fancybox="gallery" href="sample2_l.jpg"><img src="sample1_thum.jpg"></a>
必要なファイルを読み込んでページ内にdata-fancybox属性があるだけで自動的にギャラリーとしてまとめてくれますが、もちろんjsで指定して各種オプションを設定することも出来ます。
$('[data-fancybox="gallery"]').fancybox({
loop: false,
arrows: true,
buttons: [
"zoom",
//"share",
//"slideShow",
//"fullScreen",
//"download",
"thumbs",
"close"
],
afterLoad : function(instance, current) {
console.log(‘読み込み完了後に行う処理’);
}
});
モーダルのズームとか自力でやるの非常に面倒くさいので凄くありがたいオプションです。
これ以外にも沢山のオプションがあるので公式ドキュメントをご覧ください。
便利なところ（１）カルーセルとの併用が簡単
ギャラリーとしてまとめる方法がdata-fancybox属性の付与なので、スライドショーやカルーセルを実装するためのプラグインとの併用が可能です。
カルーセルのギャラリーに対してモーダル表示を簡単に実装するにはとても便利です。
便利なところ（２）スマホ対応
スマホファーストで設計されているので何もしなくてもスマホでの表示やタッチやスワイプ、ピンチ動作にもばっちり対応しています。
デザインを変更する際も基本のcssに変更を加えていく形で対応できることが多いかと思うので非常に使いやすいです。レスポンシブの対応に頭を使わなくて良いのはかなり作業を楽にしてくれます。
便利なところ（３）
Youtubeやgoogleマップなどにも対応しており、data-fancybox属性を指定したaタグのhrefにYoutubeやGoogleマップのURLを入れると自動的に対応してくれます。
モーダルの実装って基本的にあまり好きじゃないんですが、こちらのプラグインを使えばだいぶ楽を出来るので利用できる案件の際は積極的に利用していこうと思います。
