Fancybox v5でギャラリーを作る方法【後編】

Fancybox v5でギャラリーを作る方法【後編】

Fancybox v5でギャラリーを作る方法【前編】に入りきらなかった基本的なサンプルやカスタマイズするためのプロパティを紹介していきます。

• Fancybox v5でギャラリーを作る方法【前編】

なお、この後編では、「Examples」で紹介されているサンプルを紹介していこうと思います。

• Examples

サムネイル

• Basic example
• Thumbnails

デモ

• デモページ１

モダン

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery"]', {
    Thumbs: {
      type: "modern",
    },
  });
</script>

サムネイルのスタイルについてはオプション「Thumbs」の「type」で指定できます。

このパラメータはデフォルトが『modern』になります。

• Modern thumbnails

クラシック

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery2"]', {
    Thumbs: {
      type: "classic",
    },
  });
</script>

• Classic thumbnails

サムネイルあり（初期表示時なし）

サムネイルを表示するにはサムネイル表示アイコンをクリックしてください

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery3"]', {
    Thumbs: {
      showOnStart: false
    },
  });
</script>

サムネイル自体は無効になっていないが、初期表示時、サムネイルを表示させないようにするには、オプション「showOnStart」を『false』にしてください。

• showOnStart

サムネイルなし

サムネイル表示アイコンもありません。

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery4"]', {
    Thumbs: false,
  });
</script>

値に『false』を指定すると、サムネイルが表示されなくなりますし、サムネイル表示アイコンも表示されません。

スライド切り替え時の効果

• Basic example
• transition

デモ

• デモページ２

フェード：fade

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery"]', {
    /* 効果の定義 */
    Carousel: {
      transition: 'fade',
    },
  });
</script>

オプションの「Carousel」のオプション「transtion」にスライドを切り替えるときに適用される効果を指定できます。

デフォルトが「fade」になります。

クロスフェード：crossfade

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery12"]', {
    /* 効果の定義 */
    Carousel: {
      transition: 'crossfade',
    },
  });
</script>

スライド：slide

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery3"]', {
    /* 効果の定義 */
    Carousel: {
      transition: 'slide',
    },
  });
</script>

クラシック：classic

サンプル

カピパラを見る

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery4"]', {
    /* 効果の定義 */
    Carousel: {
      transition: 'classic',
    },
  });
</script>

初期表示画像サイズ

ギャラリー初期表示時、画像サイズを変更することができます。

いくつかの設定を紹介していきます。

• Initial image size
• initialSize

デモ

• デモページ３

フィット：fit

サンプル

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery"]', {
    Images: {
      initialSize: "fit",
    },
  });
</script>

オプションの「Images」の「initialSize」オプションで初期表示時のサイズを変更できます。『fit』は画面表示領域に合わせて、写真サイズを調整するオプションです。

なお、「initialSize」のデフォルトが『fit』になります。

カバー：cover

サンプル

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery2"]', {
    Images: {
      initialSize: "cover",
    },
  });
</script>

フル：full

サンプル

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery3"]', {
    Images: {
      initialSize: "full",
    },
  });
</script>

最大：max

サンプル

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery4"]', {
    Images: {
      initialSize: "max",
    },
  });
</script>

パンズーム

デモ

• デモページ３

２回目のクリック

• Secondary click
• Panzoom
• contentClick

オプション「contentClick」の『iterateZoom』と「Images」の「maxScale」オプションを利用することで、画像を２回クリックしたときのズームレベルを設定できます。

サンプル

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery5"]', {
    contentClick: "iterateZoom",
    Images: {
      Panzoom: {
        maxScale: 2,
      },
    },
  });
</script>

プロテクト（ダウンロード禁止）

デモ

• デモページ３

ダウンロード禁止

• Image protection
• protected

オプション「Images」の「protected」を『true』にすると、画像表示時、右クリックができなくなり、結果としてファイルを保存することができなくなります。

サンプル

右クリックができません

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery6"]', {
    Images: {
      protected: true

    },
  });
</script>

右クリックを無効化する以外に、スタイルを変更したい場合には、CSSクラスを定義してください。

<style type="text/css">
  /* protected:trueの場合、設定されるCSSクラス */
  .fancybox-protected {
      background-image: url(https://fancyapps.com/img/watermark.png);
      background-size: cover;
  }
  .fancybox-protected {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
  }
</style>

ツールバー

オプション「Toolbar」を指定することで、ボタンの表示／非表示を制御できます。

• Transformation controls
• Toolbar

デモ

• デモページ４

全ボタン表示

• Available buttons

サンプル

ダウンロードすると別の画像が表示れます。

HTMLコード

<a 
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/11/38112564414_2f312ddffb_k.jpg" 
    data-download-src="https://www.single-life.tokyo/wp-content/uploads/2021/11/23963987807_431bd7dc4d_k.jpg" 
    data-fancybox="gallery"
    data-caption="鎌倉">
  <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/38112564414_2f312ddffb_k.jpg" style="width:10%" />
</a>
 

<a 
    href="https://www.single-life.tokyo/wp-content/uploads/2022/01/47194213612_2867f7851e_k.jpg" 
    data-download-src="https://www.single-life.tokyo/wp-content/uploads/2022/01/47194213852_a083f2e3e5_k.jpg" 
    data-fancybox="gallery" 
    data-caption="河津桜">
  <img src="https://www.single-life.tokyo/wp-content/uploads/2022/01/47194213612_2867f7851e_k.jpg" style="width:10%" />
</a>

<script>
  Fancybox.bind('[data-fancybox="gallery"]', {
    Carousel: {
      Navigation: false,
    },
    Toolbar: {
      display: {
        left: ["prev","infobar","next"],
        middle: [
          "zoomIn",
          "zoomOut",
          "toggle1to1",
          "toggleZoom",
          "panLeft",
          "panRight",
          "panUp",
          "panDown",
          "rotateCCW",
          "rotateCW",
          "flipX",
          "flipY",
          "fitX",
          "fitY",
          "reset",
          "toggleFS"
        ],
        right: ["iterateZoom","slideshow", "fullscreen","download", "thumbs", "close"],
      },
    },
    l10n: {
     PANUP:"上に移動"
    ,PANDOWN:"下に移動"
    ,PANLEFT:"左に移動"
    ,PANRIGHT:"右に移動"
    ,ZOOMIN:"ズームイン"
    ,ZOOMOUT:"ズームアウトする"
    ,TOGGLEZOOM:"ズーム レベルの切り替え"
    ,TOGGLE1TO1:"ズーム レベルの切り替え"
    ,ITERATEZOOM:"ズーム レベルの切り替え"
    ,ROTATECCW:"反時計回りに回転"
    ,ROTATECW:"時計回りに回転します"
    ,FLIPX:"左右反転",FLIPY:"上下反転"
    ,FITX:"水平に合わせる"
    ,FITY:"縦に合わせる"
    ,RESET:"リセット"
    ,TOGGLEFS:"フルスクリーン切り替え"
    ,CLOSE:"閉じる"
    ,NEXT:"次"
    ,PREV:"前"
    ,MODAL:"このモーダル コンテンツは ESC キーで閉じることができます"
    ,ERROR:"エラーが発生しました。時間をおいてもう一度試してください"
    ,IMAGE_ERROR:"画像が見つかりません"
    ,ELEMENT_NOT_FOUND:"HTML 要素が見つかりません"
    ,AJAX_NOT_FOUND:"AJAX の読み込みエラー: 見つかりません"
    ,AJAX_FORBIDDEN:"AJAX のロード中にエラーが発生しました: 禁止されています"
    ,IFRAME_ERROR:"ページ読み込みエラー"
    ,TOGGLE_ZOOM:"ズーム レベルの切り替え"
    ,TOGGLE_THUMBS:"サムネイルの切り替え"
    ,TOGGLE_SLIDESHOW:"スライドショーの切り替え"
    ,TOGGLE_FULLSCREEN:"全画面モードの切り替え"
    ,DOWNLOAD:"ダウンロード"
    }
  });
</script>

すべてのボタンを表示させたので代替テキストも日本語にしてあります。

カスタムボタン

ボタンもカスタマイズすることができます。オプション「Toolbar」の「items」にボタンの定義を追加してオプション「display」でカスタマイズしたボタンを定義してください。

このサンプルではfacebookの共有ボタンを追加してあります。

サンプル

カピパラを見る

HTMLコード

<a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" data-fancybox="gallery2" data-caption="ウサギ">
  <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" style="width:10%" />
</a>
<a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" data-fancybox="gallery2" data-caption="ネコ">
  <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" style="width:10%" />
</a>
<span
  data-fancybox="gallery2"
  data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
  data-caption="ハシビロコウ"
>
   <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg" style="width:10%" />
</span>
<a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg" data-fancybox="gallery2" data-caption="カピパラ">
  カピパラを見る
</a>

<script>
  Fancybox.bind('[data-fancybox="gallery2"]', {
Toolbar: {
  items: {
    facebook: {
      tpl: `<button class="f-button"><svg><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></button>`,
      click: () => {
        window.open(
          `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
            window.location.href
          )}&t=${encodeURIComponent(document.title)}`,
          "",
          "left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes"
        );
      },
    },
  },
  display: {
    left: ["infobar"],
    middle: [],
    right: ["facebook", "close"],
  },
},
  });
</script>

マウスパニング

ドラッグせずに、マウスを移動させるだけで表示位置を移動させることができます。

• Mouse panning

デモ

• デモページ５

サンプル

ダウンロードすると別の画像が表示れます。
<

HTMLコード

<script>
  Fancybox.bind('[data-fancybox="gallery"]', {
    Images: {
      Panzoom: {
         panMode: "mousemove"
      },
      initialSize: "max",
    },
  });
</script>

オプション「panMode」に『mousemove』を指定すると、マウスを動かすだけで表示エリアを移動させることができます。

• panMode

ご参考

関連ページ

• Fancybox v5でギャラリーを作る方法【前編】
• Fancybox v4でギャラリーを作る方法
• PhotoSwipeでギャラリーを作る方法
• PhotoSwipe v5でギャラリーを作る方法
• Lightcaseでギャラリーを作る方法
• Colorboxでギャラリーを作る方法
• LIGHTBOXでギャラリーを作る方法
• 軽量lightboxライブラリ「Luminous」でギャラリーを作る方法
• Swipeboxでギャラリーを作る方法
• baguetteBox.jsでギャラリーを作る方法