Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。
とってもモバイルファーストに設計されているのでとってもおすすめです。
モバイルファーストですねー
共有ボタンもありますよー
【実装】画像（デフォルト）
See the Pen 【jQuery】『fancyBox3』画像（デフォルト） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea">
<a href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" data-fancybox="images" data-caption="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" data-fancybox="images" data-caption="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" data-fancybox="images" data-caption="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a>
</div>
jQuery
// デフォルトだけでオッケーです
【実装】画像（共有ボタンをつける）
See the Pen 【jQuery】『fancyBox3』画像（共有ボタンをつける） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea">
<a href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" data-fancybox="images_sns" data-caption="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" data-fancybox="images_sns" data-caption="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" data-fancybox="images_sns" data-caption="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a>
</div>
jQuery
$(document).ready(function() {
$('[data-fancybox="images_sns"]').fancybox({
buttons : [
"share",
"close"
],
thumbs : {
autoStart : false
}
});
});
【実装】画像（ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける）
See the Pen 【jQuery】『fancyBox3』画像（ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea">
<a href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" data-fancybox="images_buttons" data-caption="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" data-fancybox="images_buttons" data-caption="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a>
<a href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" data-fancybox="images_buttons" data-caption="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a>
</div>
jQuery
$(document).ready(function() {
$('[data-fancybox="images_buttons"]').fancybox({
buttons : [
"zoom",
"share",
"slideShow",
"fullScreen",
"download",
"thumbs",
"close"
],
thumbs : {
autoStart : false
}
});
});
【実装】ビデオ（Youtube、Vimeo、MP4）
See the Pen 【jQuery】『fancyBox3』ビデオ（Youtube、Vimeo、MP4） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea_b">
<a data-fancybox href="https://www.youtube.com/watch?v=hOsRWapBP0Y">Youtube</a>
<a data-fancybox href="https://vimeo.com/390919309">Vimeo</a>
<a data-fancybox href="https://itukanokoto.com/wp/wp-content/themes/designitukanokoto/video/itukanokoto_b.mp4">MP4</a>
</div>
jQuery
// デフォルトだけでオッケーです
【実装】Iframe（Webpage、PDF）
See the Pen 【jQuery】『fancyBox3』Iframe（Webpage、PDF） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea_b">
<a data-fancybox data-type="iframe" data-src="https://125naroom.com/" href="javascript:;">Webpage</a>
<a href="https://125naroom.com/" data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : false, "css" : {"width" : "600px"}}}'>Webpage - width: 600px;</a>
<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">PDF</a>
</div>
jQuery
// デフォルトだけでオッケーです
【実装】etc（Google Map、Inline）
See the Pen 【jQuery】『fancyBox3』etc（Google Map、Inline content） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="fancyArea_b">
<a data-fancybox data-caption="Google Map - London" href="https://www.google.com/maps/place/%E3%82%A4%E3%82%AE%E3%83%AA%E3%82%B9+%E3%83%AD%E3%83%B3%E3%83%89%E3%83%B3/@51.5287718,-0.2416796,11z/data=!3m1!4b1!4m5!3m4!1s0x47d8a00baf21de75:0x52963a5addd52a99!8m2!3d51.5073509!4d-0.1277583?hl=ja">Google Map</a>
<a data-fancybox data-src="#modal01" href="javascript:;">Inline content</a>
<div class="modal" id="modal01">
<p>HELLO!</p>
</div>
</div>
jQuery
// デフォルトだけでオッケーです
fancybox3のダウンロード
まずはfancybox3に必要なファイルを下記サイトからダウンロードします。
fancybox3の使い方
ダウンロードファイルの中で必要なファイルは以下の2点です。（distフォルダに入っています。）
- jquery.fancybox.min.css
- jquery.fancybox.min.js
※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。
HTML
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.min.js"></script>
CDNを使う場合は、
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
HTML
基本的な書き方。
<a href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" data-fancybox data-caption="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a>
オプション設定
| オプション | 説明 | 初期値 |
|---|---|---|
| loop | 複数画像表示時に最初と最後をループさせる | false |
| gutter | スライド間の水平スペース | 50 |
| keyboard | キーボードナビゲーションを有効にする | true |
| preventCaptionOverlap | キャプションがコンテンツオーバーラップできるようにする | true |
| arrows | 表示ナビゲーション矢印 | true |
| infobar | 表示カウンタ | true |
| smallBtn | 右上Closeボタン表示 | “auto” |
| toolbar | ツールバー表示 | “auto” |
| idleTime | スライド移動までの待機時間（秒） | 3 |
| protect | 右クリックを無効にする | false |
| modal | コンテンツをモーダルにする | false |
| parentEl | コンテナの基準となる親要素 | “body” |
| hideScrollbar | ブラウザのスクロールバーを非表示にする | true |
| autoFocus | ズーム実行時にフォーカス可能要素に自動的にフォーカスする | true |
| backFocus | フォーカスを戻す | true |
| trapFocus | コンテンツをモーダルにする | true |
下記ページにその他のオプション内容と設定方法が詳細に載っています。
（英語ページになります。日本語翻訳おすすめです。）
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
スワイプもできてとってもモバイルファーストですねー
商用利用の際は商用ライセンス（有料）が必要なのでご注意をー
