※ ChatGPTを利用し、要約された質問です(原文:Lightbox2でのキャプションについて)
Lightbox2でのキャプションについて
このQ&Aのポイント
Lightbox2を使用して画像の拡大表示を行っていますが、キャプションの表示に問題があります。
現在、キャプションはtitle属性内にHTMLで装飾した長い文章が入っており、サムネイル画像にマウスカーソルを置くとHTMLタグも表示されてしまいます。
改善するためには、title属性を本来の目的に使用し、Lightboxのキャプション専用の属性を追加する必要があります。
画像の拡大表示のために、Lightbox2を使用しております。
画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。
しかしLightboxのキャプションはtitle属性であるため、(当然ですが)サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。
出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか?
ソースは以下のような感じです。
●現状
<a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a>
●理想(こんな感じに出来たらいいなぁというイメージです)
<a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a>
おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。(JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません)
他に何か良い方法はありますでしょうか?
お礼
ありがとうございました。 自分でいろいろ試していたら、希望通りの動作にすることが出来ました。