Slimbox2をBoxerに変更

モーダルウィンドウを作成するLightbox系のjQueryプラグインを、Slimbox2から、Boxerに変更しました。

Slimbox2は、軽量で設置も簡単だったのですが、スマートフォンなどのユーザーインターフェイスを提供していない（そもそも、そういったデバイスにモーダルウィンドウが必要かどうかも検討しましたが）ため、レスポンシブ対応のLightbox(Boxer)に変更しました。

ただし、Boxerは開発を終了しており、Formstoneのライブラリ群の中のLightboxとして開発が継続中ですが、ここではBoxerについて解説します。

1.ダウンロードサイトからファイル群をダウンロードし、任意のフォルダーへアップロードします。

Boxerダウンロード（GitHub）

2.ヘッダで、jqueryと、cssファイル、スクリプト本体を記述。

<head>
（中略）
<link href="/boxer-master/jquery.fs.boxer.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/boxer-master/jquery.fs.boxer.js"></script>
</head>

3.body終了タグ直前に次のコードを記述

<script type="text/javascript">
$(".boxer").boxer();
</script>
</body>

4.画像に対して、data-galleryを指定。また、と、同じ要素を指定すれば、ギャラリーでの表示もできます。

<a class="boxer" data-gallery="gallery" href="/music/img/2017-12-0401.png" title="テキストウイジット"><img alt="テキストウイジット" src="/music/assets_c/2017/12/2017-12-0401-thumb-320xauto-3111.png" width="320" height="240" class="mt-image-none" /></a>

なお、私の場合、MovableTypeで画像をアップロードしたさい、自動でdata-gallery="gallery"を指定するように、Image.pm（402行目あたり）を書き換えています。

$text = sprintf(
    '<a class="boxer" data-gallery="gallery" href="%s" title="%s"><img alt="%s" src="%s" %s %s /></a>',
    MT::Util::encode_html( $asset->url ),
    MT::Util::encode_html( $asset->label ),
    MT::Util::encode_html( $asset->label ),
    MT::Util::encode_html( $thumb->url ),
    $dimensions,
    $wrap_style,
);
            }