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

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

きのこさん
モバイルファースト!
きのこさん
共有ボタンもあるのでとっても素敵ですー

1. 画像(デフォルト)

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

// デフォルトだけでオッケーです

サンプルページはこちら

2. 画像(共有ボタンをつける)

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
    }
  });
});

サンプルページはこちら

3. 画像(ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける)

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
    }
  });
});

サンプルページはこちら

4. ビデオ(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

// デフォルトだけでオッケーです

サンプルページはこちら

5. 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

// デフォルトだけでオッケーです

サンプルページはこちら

6. 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に必要なファイルを下記サイトからダウンロードします。

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

下記ページにその他のオプション内容と設定方法が詳細に載っています。
(英語ページになります。日本語翻訳おすすめです。)

fancybox3 · Documentation

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
スワイプもできてとってもモバイルファーストですねー
きのこさん
商用利用の際は商用ライセンス(有料)が必要なのでご注意をー

関連記事

【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集

【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

日産|ブランドサイト
日産|ブランドサイト
ぼくのトミカ #1
ぼくね、もっと走りたいんだよ