キレイなモーダル表示jQueryプラグイン Fancybox

投稿日：2022年7月2日

前回はWordPressのプラグイン Fancybox for WordPress を紹介しました。

今回はjQueryライブラリ Fancybox を紹介します。

▲左からモーダル表示させるFancybox 、中央はスライド表示させるCarousel 、右はMapなどの画像を拡大表示、スクロールできるPanzoom 。
今回はFancybox を紹介します。

ギャラリーブロックに実装してみました。
各画像をクリックするとモーダル表示されます。

必要なこととして、
❶functions.phpにFancyboxのCDN(JS、CSS)を記載する。
❷Fancyboxを適用するため、ギャラリー内の各画像に属性を追加する。

❶FancyboxのCDN(JS、CSS)を記載する。

// Fancyboxの記事だったら出力
function enqueue_script(){
  if(is_single(8632)){
      wp_enqueue_script('fancybox_customize', get_stylesheet_directory_uri() . '/js/fancybox_customize.js', [], '', true);
      wp_enqueue_script('fancybox_js','https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js', [], '', false);
  }
}
add_action('wp_enqueue_scripts', 'enqueue_script');

▲JSを出力するための記述です。
ID:8632（今回の投稿ページ）の記事だったらFancyboxのカスタマイズを含んだJSをbodyの終了タグの手前に出力させ、さらにFancyboxのCDNを読み込んでいます。

// Fancyboxの記事だったら出力
function enqueue_style(){
  if(is_single(8632)){
      wp_enqueue_style('fancybox_css', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css', [], '', false);
  }
}
add_action('wp_enqueue_scripts', 'enqueue_style');

▲CSSを出力するための記述です。

❷Fancyboxを適用するため、ギャラリー内の各画像に属性を追加する。

jQuery(document).ready(function ($) {
  $(function () {
    $('#galleryWrap .wp-block-image a').attr('data-fancybox', 'gallery');
  });
});

▲❶で読み込んでいるJSです。
jQueryのattrでギャラリー内の各画像にdata-fancybox="gallery"を追加します。ブロックエディタでHTML編集するとエラーになってどうしても追加できませんでした。

オプションも充実しています。実装する場合は上の記述に下記を追記します。

Fancybox.bind("[data-fancybox]", {
  // Your options go here
});

こちらは通常のhtmlに適用したものです。

ソースコードは下記

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fancybox sample</title>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.min.js"
    integrity="sha512-2v91ndX8jAw9J2IAZ4RnH+lKMOi0PzyFJ1i6D69Nx1RlY2UJpy6r1WIo35HrRkHG4ARj1Xl/xyoh0X9ze+6Y2w=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- Fancybox JS -->
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

  <!-- Fancybox CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #imgWrap {
      width: 700px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    #imgWrap a img {
      margin: 5px;
    }
  </style>
</head>

<body>
  <div id="imgWrap">
    <a href="images/l/img_l_01.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_01.jpg" alt="イメージ">
    </a>
    <a href="images/l/img_l_02.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_02.jpg" alt="イメージ">
    </a>
    <a href="images/l/img_l_03.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_03.jpg" alt="イメージ">
    </a>
    <a href="images/l/img_l_04.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_04.jpg" alt="イメージ">
    </a>
    <a href="images/l/img_l_05.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_05.jpg" alt="イメージ">
    </a>
    <a href="images/l/img_l_06.jpg" data-fancybox="gallery">
      <img src="images/s/img_s_06.jpg" alt="イメージ">
    </a>
  </div>
</body>

</html>

まとめ

オリジナルなのでWordPressプラグインよりも動作も軽快で表示も美しいです。
個人利用で無料で使えるとはありがたいですね。

商用利用だと段階に応じてライセンスが用意されているのでこちらを参考にしてください。

折を見てCarousel やPanzoom も紹介したいと思います。

最後まで読んでくださりありがとうございました。