ど素人から毛を生やす。<延>

Lightboxでhover時のタイトル除去v2.7

Web > javascript 2014年4月22日(最終更新:3年前)

このページは2014.4.22に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
原付の修理代で懐が痛いくせに中古ゲームを買った餅。です。

TOH-Rをクリアしたらさ、
TOI-Rがやりたくなるのは当然の流れだったよ。

H-Rにちょろっと出てくる異世界話が気になってくるのだもの。

 

さて、今回はjsの話。

リンクを押すと画像が浮かび上がるアレ、ライトボックス。
最も定番的なライトボックスのjsは、やはり、
http://lokeshdhakar.com/projects/lightbox2/
だと思います。

今回、こちらを使って作業をしていたのですが、ひとつ問題が発生してきまして。

lightbox2のキャプションはtitle属性によってつけられますが、このtitile属性はリンクをhoverすることでも表示される(というか本来はそのための)属性です。

今回はキャプションに長文を入れる必要があったのですが、普通にtitleに入れるとhoverしたとき酷いことになります。

ので、回避方法を探してみたのですが、Google先生が教えてくれる解決法がどれも上手く行きません。
というのも、lightbox2は今も改良され続けているようで、昨日の対処法が今日はもう古い、みたいなことが普通に起きているみたいなのです。

というわけで、v2.7辺りの解決法を貼ってみることにします。

①Dreamweaverなどの「一括置換」がある編集ツールを選択
②「lightbox.js」の全ての「title」を「caption」に一括置換
③jsで指定されるクラス名も変わるのでcssなどを対応させる
④lightboxを適用させるリンクの「title」を「caption」に変更すれば完了

なんかこう、Google先生が教えてくれる答えに比べて随分と力技臭いので本当にこれで大丈夫かという気持ちになるのですが、少なくとも僕がやってみた限りは本当にこれで大丈夫でした。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)