SWELLでも使われている非jQueryのLightbox JSライブラリのluminousをSWELL以外のテーマでも使いたいと思う人は多いと思います。
luminousの使い方は検索すると沢山出てくるのですが、Wordpressの画像ブロックに簡単に適用できないマークアップが必要なものばかりです。
SWELLの作者さんもLuminousの導入方法について詳しく書かれていますが、Wordpressのブロックエディタには対応していません。
この記事では、ブロックエディタの画像ブロックにも簡単にluminousを適用する方法をまとめます。
lumoinousの導入手順
luminousのgithubからdist以下の2つのファイルをダウンロードして、サーバーにアップロードします。
検索すると沢山出てくるので、そちらを参照します。
luminousを起動するjavascript
luminousを起動する時には、aタグをクリックされたときに起動する条件を指定する必要があります。
起動するaタグにのみ付加されたclassを指定しますが、それだとWordpressのブロックエディタだとclass追加できないので、うまくいきません。
aタグの区別が出来ればいいので、ブロックに必ずついているセレクタwp-clock*と区別するためのセレクタluminousを組み合わせてaタグを教えてあげます。
luminous本体のjsを読み込んだ後にスクリプトが読み込まれるようにすればいいでしょう。
<script>
var luminousTrigger = document.querySelectorAll('[class^=wp-block].luminous a');
if( luminousTrigger !== null ) {
for (var i = 0; i < luminousTrigger.length; i++) {
var elem = luminousTrigger[i];
new Luminous(elem);
}
}
</script>lightboxがモーダルで開いた時に、スマホのヘッダー固定の下に潜ってしまうと、閉じにくいし、狭くなるので、z-indexを適当に大きくしておきます。
.lum-lightbox.lum-open {
z-index: 9999;
}
luminousを適用したい画像ブロックにluminousを追加
luminousを適用したい画像ブロックに画像のリンクを追加します。
通常はメディアファイルを指定することになるでしょう。
高度な設定⇒追加CSSクラスに、luminousを追加します。
それで終わりです。
ちなみにメディアとテキストブロックでも同じように画像に画像リンクを追加すれば機能します。
まとめ
luminousの導入も簡単で、wordpressへの適用も簡単なのですが、今回の方法ではある程度手動操作が入ります。
- 画像のリンクを指定する必要がある
- 追加classを追加する必要がある
luminousはaタグが無いと動かないので、①は避けられません。
やはりSWELLの実装の方が優れています。
SWELLはjavascriptでDOMを検索して、luminous対象の画像かどうかチェックし、aタグのhrefの代わりに、luminousのオプションのsourceAttributeをdata-luminousに指定し、拡大表示する画像パスをjavascrtiptで設定しています。lazyloadの前処理みたいなイメージで、サイト読み込んだ後にDOMのimgタグを書き換えて、luminousを起動しています。
今回のカスタマイズは、企業サイトなどで固定ページでピンポイントで使う場合にはいいと思いますが、ブログ記事などで、すべての画像を対象にする場合は現実的ではないと思いますので、SWELLのような処置を追加しないと現実的ではないですね。
コメント