fancybox3の使い方、カスタマイズ例(v3.5) ポップアップ簡単設置【jQuery】

まず､jQuery本体をheadで読み込みます｡

// jQuery 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

fancyboxのJSとCSSを読み込みます｡
CSSはhead内､JSはbody閉じタグ直前で読み込みます｡

// fancybox CSS
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

// fancybox JS
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

画像の場合､以下のように書きます｡

<a data-fancybox="gallery" href="apple@w640.jpg" data-caption="りんご">
  <img src="apple@w320.jpg" width="320" height="240" />
</a>

特に細かい指定がなければ､これだけでfancyboxを使うことができます｡

fancybox デモ

YouTube動画やGoogle mapのiframeにも対応しています｡

<a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/●●" href="javascript:;">
  YouTube動画
</a>

fancybox iframe デモ

こんなときに使うカスタマイズです｡

単純にキャプションだけであれば､デフォルト機能で「data-caption」にテキストを入れればいいのですが､日付､タイトル､説明､カテゴリなどを別々のデザインにしたりするにはこのカスタマイズが必要になります｡

WordPressであれば､カスタムフィールドを設定して､投稿ごとなどにそれぞれの項目､値が入るようにしていきます｡

HTMLタグにはaタグにデフォルト機能の「data-caption」ではなく､「data-cate」「data-date」「data-title」「data-text」をそれぞれ設定します｡

<a href="img/img_large.jpg" data-fancybox="gallery" data-cate="カテゴリ" data-date="2020年12月1日" data-title="タイトルです" data-text="説明です説明です説明です説明です">
  <img src="img/img.jpg" alt="画像">
</a>

fancyboxのオプション設定のcaptionに､クリックした項目のdata属性をそれぞれ取得し､取得した値とそれを出力したいHTMLタグを設定していきます｡

<script type="text/javascript">
  $("[data-fancybox]").fancybox({
    loop: true,
    caption: function (instance, item) {
      cate = $(this).data('cate');
      date = $(this).data('date');
      title = $(this).data('title');
      text = $(this).data('text');

      caption = "";
      caption += "<p class='fancybox-cate'>" + cate + "</p>";
      caption += "<p class='fancybox-date'>" + date + "</p>";
      caption += "<p class='fancybox-title'>" + title + "</p>";
      caption += "<p class='fancybox-text'>" + text + "</p>";

      return caption;
    }

  });
</script>

データ属性については､こちらの記事で解説しています｡

参考サイト

人気のfancyBoxの使い方

foncybox.jsをWordPressのギャラリーブロックに対応させる方法は以下の記事で解説しています｡