Lightboxでキャプションを入れつつツールチップを非表示にする
Lightboxでイラストを掲載するについて、キャプションを容易に入力できるらしかったのでやってみたところ、ツールチップが表示されるようになってしまった。消そう。
ついでにページャーも少し変更を加えた。
Lightboxのキャプション機能
Lightboxは、既存のjsとcssを組み込むだけで画像ファイルがそれらしく掲載できる、モーダルウィンドウを実装できるJavaScriptライブラリ。
その上、キャプションの実装も容易。
以下のように、『title属性』に入力した内容も画像拡大時に表示してくれる。
<figure>
<a href="images/221112/pic.webp" data-lightbox="group" title="2022.11.12 Illustration by もとす, はむ">
<img src="images/221112/tmb.webp">
</a>
</figure>
しかしながらこれは『title属性』であり、それゆえ画像拡大前のサムネイルにカーソルを当てると...
キャプションとして入力した内容が、『ツールチップ』として表示されてしまう。
キャプションの長さによってはサムネイルの大半が隠れる自体も起きかねない。
そうでなくても煩わしい。
ツールチップを消す
というわけでこのツールチップを非表示にする。
手法としては、『title属性がツールチップとして表示されることを回避する』のは無理そうだったので、キャプションをtitle属性以外に変更した。
また、ここで扱うLightboxのバージョンは『v2.11.4』とする。
○ 『lightbox.js』での操作
228行目あたりにある記述を、以下のように変更する。
＜変更前＞
title: $link.attr('data-title') || $link.attr('title')↓
＜変更後＞
title: $link.attr('data-title') || $link.attr('caption')キャプションの内容を受け取る箇所を『title』としていたところを、『caption』に変更している。
○ 『index.html』での操作
<figure>
<a href="images/221112/pic.webp" data-lightbox="group" caption="2022.11.12 Illustration by もとす, はむ">
<img src="images/221112/tmb.webp">
</a>
</figure>ページャーを変更する
画像拡大時にキャプションと同時に表示されるページャーについても少し変更を加える。
デフォルトだと『Image 1 of 10』という形式で表示されるが、『1 / 10』でも十分伝わるのでシンプルにしたい。
『lightbox.js』の44行目あたりにある記述を、以下のように変更する。
＜変更前＞
albumLabel: 'Image %1 of %2',↓
＜変更後＞
albumLabel: '%1 / %2',あとは細部をLightboxに付属するcssで編集し、いい感じになった。