お知らせでもお伝えしましたが、画像のモーダルウィンドウにFancyboxを導入しました。Fancyboxの導入方法については、てがろぐの公式マニュアルに「Fancyboxを使って画像を拡大したい場合」というものがあるのですが、最新のバージョンだと設置方法がやや異なるので覚え書きとしてさらっと書いておこうと思います。

基本的な使い方
skin-cover.htmlのhead要素内にCSSを、</body>直前にJavaScriptを挿入します。
/*FancyboxのCSS*/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css">/*FancyboxのJavaScript*/
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
       /*オプションはここに書きます*/
    });
</script>JavaScriptは3行目以降も書かないとFancyboxが起動しません。また、てがろぐ管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】でスクリプトファイルを指定する場合は下記のように書くといいでしょう。
/*設定でスクリプトファイルを指定する場合*/
[[JS:LIGHTBOX]]
<script>
    Fancybox.bind("[data-fancybox]", {
       /*オプションはここに書きます*/
    });
</script>次にてがろぐ管理画面の[設定]→[ページの表示]→【投稿本文の表示／画像】で画像のように設定します。「画像リンクにLightbox系用の属性を付加」にはdata-fancybox="gallery"を、「代替文字がある場合にキャプションを作る」にはdata-captionを指定します。

これで設定は終了です。後はいつも通りてがろぐで画像をアップすればOKです。上記の【投稿本文の表示／画像】の画像だけではギャラリー化されないので、適当に画像をアップしました。どう表示されるかご確認ください。
サムネイルのカスタマイズ
上記画像で確認するとわかる通り、Fancyboxでは拡大画像の下にギャラリー化した画像のサムネイルが表示されます。このサムネイルのカスタマイズについて紹介します。

まず、サムネイルの表示スタイルの変更ができます。デフォルトでは"modern"というAppleのフォトアプリ風のスタイルになってます。私はあんまり好みじゃないので"classic"を指定してます。/*サムネイルのスタイルをclassicに変更する*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
         Thumbs: {
            type: "classic",
         },
        },
    });
</script>その他に"scrollable"というスタイルがあります。これはサムネイルを画面右横に縦方向へ並べるスタイルです。いずれも公式サイトのExamplesで挙動を確認できます。

また、サムネイルは非表示にもできます。方法は2つ。/*サムネイルを非表示にする*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
        Thumbs: {
          showOnStart: false,
        },
      },
    });
</script>/*サムネイルを完全に非表示にする*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
        Thumbs: {
          Thumbs: false,
        },
      },
    });
</script>Fancyboxは上部に表示されるボタンでサムネイルの表示非表示を切り替えられるのですが、後者の方法だとサムネイル切り替えボタンが表示されません。任意であってもサムネイルを表示させたくない場合は後者の方法を利用すればいいと思います。

他にも表示されるボタンを指定＆ボタンの位置を変更したり背景を白くしたり右クリック禁止＆ウォーターマークを画像に重ねる(ただし、右クリック禁止は拡大画像のみに適用)など、できることは結構あります。気になる方は公式サイトでご確認ください。

豆知識
Fancyboxのキャプションですが、HTMLを利用できます。ただし、エスケープが必要です。<a class="imagelink " href="./images/simple.jpg" data-fancybox="gallery" data-caption="2行にすることができます。&lt;br&gt;こんなふうに書きます。">
    <img class="embeddedimage " width="1400" height="1050" loading="lazy" src="./images/simple.jpg" alt="2行にすることができます。&lt;br&gt;こんなふうに書きます。">
</a>まああまり利用することはないと思いますが…。

#てがろぐ #カスタマイズ