Lightboxのタイトルへのリンク方法
ホームページを作成している中で、写真をクリックすると浮き出てくるような効果をさせるLightboxを良く使う。使用バージョンは、Lightbox2のv2.04です。
このとき、写真を表示する際、左下に写真のタイトルを表示させることができます。これを設定するには、title="タイトル"を追加すればよい。
<a href="SAMPLE.jpg" rel="lightbox" title="サンプル写真">写真</a>
ある方から”写真が表示されたとき、そこからページに行きたい（リンクする）”との要望があり、それ修正を行いました。その修正は、title=の部分にリンクを付けるタグを記述すればよい。
<a href="SAMPLE.jpg" rel="lightbox" title='<a href="http://リンク先">サンプル写真</a>'>写真</a>
これで、Lightbox上からタイトルをクリックすることで、指定のページにリンクすることができた。
ところが、リンクにマウスカーソルをあわせた時に表示されるタイトル表示でリンクのタグが表示されてしまい、見た目良くない状態となった。
色々なサイトを参考にしたが、中々これといった情報がなかったが、”title=”を”name=”に変更して、表示させない方法があった。
【lightbox.js ２箇所変更】
this.imageArray.push([imageLink.href, imageLink.title]);
↓
this.imageArray.push([imageLink.href, imageLink.name]);
collect(function(anchor){ return [anchor.href, anchor.title]; }).
↓
collect(function(anchor){ return [anchor.href, anchor.name]; }).【HTMLファイル変更 ”title=”を”name=”】
<a href="SAMPLE.jpg" rel="lightbox" title='<a href="http://リンク先">サンプル写真</a>'>写真</a> ↓ <a href="SAMPLE.jpg" rel="lightbox" name='<a href="http://リンク先">サンプル写真</a>'>写真</a>
たった、これだけで対応できた
