【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
- 2020.2.13
- jQuery

Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。
とってもモバイルファーストに設計されているのでとってもおすすめです。


もくじ(実装サンプル)
1. 画像(デフォルト)
See the Pen
【jQuery】『fancybox3』 by 125naroom (@125naroom)
on CodePen.
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
// デフォルトだけでオッケーです
2. 画像(共有ボタンをつける)
See the Pen
【jQuery】『fancybox3』画像(共有ボタンをつける) by 125naroom (@125naroom)
on CodePen.
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 } }); });
3. 画像(ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける)
See the Pen
【jQuery】『fancybox3』画像(ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける) by 125naroom (@125naroom)
on CodePen.
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 } }); });
4. ビデオ(Youtube、Vimeo、MP4)
See the Pen
【jQuery】『fancybox3』ビデオ(Youtube、Vimeo、MP4) by 125naroom (@125naroom)
on CodePen.
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
// デフォルトだけでオッケーです
5. Iframe(Webpage、PDF)
See the Pen
【jQuery】『fancybox3』Iframe(Webpage、PDF) by 125naroom (@125naroom)
on CodePen.
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
// デフォルトだけでオッケーです
6. etc(Google Map、Inline)
See the Pen
【jQuery】『fancybox3』etc(Google Map、Inline content) by 125naroom (@125naroom)
on CodePen.
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に必要なファイルを下記サイトからダウンロードします。
fancybox – Touch enabled, responsive and fully customizable jQuery lightbox script
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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに


関連記事
おすすめ
かんれん
- web / 2018.10.24
- 【CSS】ベンダープレフィックス 必要なもの不要なもの
- web / 2019.5.10
- 【CSS】ローディングアニメーション実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.09.29New
- センダイパルコ15th | 仙台PARCO
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。