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

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

デザオ
モバイルファーストですねー
デザコト
共有ボタンもありますよー

【実装】画像（デフォルト）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="fancyArea">
  <a href="https://125naroom.com/demo/common/img/slide01.svg" data-fancybox="images" data-caption="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a>
  <a href="https://125naroom.com/demo/common/img/slide02.svg" data-fancybox="images" data-caption="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a>
  <a href="https://125naroom.com/demo/common/img/slide03.svg" data-fancybox="images" data-caption="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a>
</div>

CSS

/* ===== サムネイルを3つ並べる ===== */
.fancyArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.fancyArea a {
  width: 32%;
}
.fancyArea a img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea a { transition: none; }
}

jQuery

$(function () {
  // オプションはデフォルトだけでオッケーです
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
});
見本ページをひらく（画像・デフォルト）

【実装】画像（共有ボタンをつける）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="fancyArea">
  <a href="https://125naroom.com/demo/common/img/slide01.svg" data-fancybox="images_sns" data-caption="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a>
  <a href="https://125naroom.com/demo/common/img/slide02.svg" data-fancybox="images_sns" data-caption="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a>
  <a href="https://125naroom.com/demo/common/img/slide03.svg" data-fancybox="images_sns" data-caption="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a>
</div>

CSS

/* ===== サムネイルを3つ並べる ===== */
.fancyArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.fancyArea a {
  width: 32%;
}
.fancyArea a img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
  $('[data-fancybox="images_sns"]').fancybox({
    buttons : [
      "share",
      "close"
    ],
    thumbs : {
      autoStart : false
    }
  });
});
見本ページをひらく（画像・共有ボタンをつける）

【実装】画像（ズーム、シェア、スライドショー、フルスクリーン、ダウンロード、サムネイル、閉じるボタン全部つける）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="fancyArea">
  <a href="https://125naroom.com/demo/common/img/slide01.svg" data-fancybox="images_buttons" data-caption="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a>
  <a href="https://125naroom.com/demo/common/img/slide02.svg" data-fancybox="images_buttons" data-caption="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a>
  <a href="https://125naroom.com/demo/common/img/slide03.svg" data-fancybox="images_buttons" data-caption="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a>
</div>

CSS

/* ===== サムネイルを3つ並べる ===== */
.fancyArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.fancyArea a {
  width: 32%;
}
.fancyArea a img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
  $('[data-fancybox="images_buttons"]').fancybox({
    buttons : [
      "zoom",
      "share",
      "slideShow",
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ],
    thumbs : {
      autoStart : false
    }
  });
});
見本ページをひらく（画像・ボタンを全部つける）

【実装】ビデオ（Youtube、Vimeo、MP4）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="fancyArea_b">
  <a data-fancybox href="https://www.youtube.com/watch?v=VGdlkVNffC4">Youtube</a>
  <a data-fancybox href="https://vimeo.com/390919309">Vimeo</a>
  <a data-fancybox href="https://125naroom.com/demo/video/itukanokoto_b.mp4">MP4</a>
</div>

CSS

/* ===== ひらくボタン ===== */
.fancyArea_b {
  width: 250px;
  margin: 0 auto;
}
.fancyArea_b a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.2em .4em;
  color: #2b2a27;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #ffffff 50%, #2b2a27 50%);
  background-size: 200% auto;
  transition: .3s;
  position: relative;
  margin-bottom: 30px;
}
.fancyArea_b a:after {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
  right: -5px;
  bottom: -5px;
  position: absolute;
}
.fancyArea_b a:hover {
  color: #ffffff;
  background-position: -100% 0;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea_b a { transition: none; }
}

jQuery

$(function () {
  // オプションはデフォルトだけでオッケーです
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
});
見本ページをひらく（ビデオ）

【実装】Iframe（Webpage、PDF）

コードを見る（HTML・CSS・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>

CSS

/* ===== ひらくボタン ===== */
.fancyArea_b {
  width: 250px;
  margin: 0 auto;
}
.fancyArea_b a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.2em .4em;
  color: #2b2a27;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #ffffff 50%, #2b2a27 50%);
  background-size: 200% auto;
  transition: .3s;
  position: relative;
  margin-bottom: 30px;
}
.fancyArea_b a:after {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
  right: -5px;
  bottom: -5px;
  position: absolute;
}
.fancyArea_b a:hover {
  color: #ffffff;
  background-position: -100% 0;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea_b a { transition: none; }
}

jQuery

$(function () {
  // オプションはデフォルトだけでオッケーです
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
});
見本ページをひらく（Iframe）

【実装】etc（Google Map、Inline）

コードを見る（HTML・CSS・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>

CSS

/* ===== ひらくボタン ===== */
.fancyArea_b {
  width: 250px;
  margin: 0 auto;
}
.fancyArea_b a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.2em .4em;
  color: #2b2a27;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #ffffff 50%, #2b2a27 50%);
  background-size: 200% auto;
  transition: .3s;
  position: relative;
  margin-bottom: 30px;
}
.fancyArea_b a:after {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
  right: -5px;
  bottom: -5px;
  position: absolute;
}
.fancyArea_b a:hover {
  color: #ffffff;
  background-position: -100% 0;
}
.modal {
  display: none;
}
.modal p {
  font-size: 24px;
}

/* 動きを減らす設定のとき（fancybox の動きは <script> で止める） */
@media (prefers-reduced-motion: reduce) {
  .fancyArea_b a { transition: none; }
}

jQuery

$(function () {
  // オプションはデフォルトだけでオッケーです
  // 動きを減らす設定のときは、fancybox の動きを止める
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    $.fancybox.defaults.animationEffect = false;
    $.fancybox.defaults.transitionEffect = false;
  }
});
見本ページをひらく（Google Map、Inline）

fancybox3のダウンロード

まずはfancybox3に必要なファイルを下記サイトからダウンロードします。

fancybox – Touch enabled, responsive and fully customizable jQuery lightbox script

fancybox3の使い方

ダウンロードファイルの中で必要なファイルは以下の2点です。（distフォルダに入っています。）

  1. jquery.fancybox.min.css
  2. 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="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.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/common/img/slide01.svg" data-fancybox data-caption="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" 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』の実装サンプル集
デザインのメモ 2024.5.29

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。