necoのひとりごと Lightbox2.04改良(キャプション編)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Lightbox2.04改良(キャプション編)

最近あちこちでLight-boxによる表現をよく見ます。
そのため、クライアントからもLight-boxを使いたいと言う要望があります。
Light-boxでひとつ面倒な点は、キャプションを表示させたい場合<a>タグのtitle属性にその内容を書く必要があることです。
ご存知のように、title属性に書いた内容は、マウスオーバーした時にツールチップとして表示されます。
長いキャプションの場合なんとも目障りです。
そこで、
<a>タグに新たにcaptionという属性を指定して、そこに書いた内容がLight-boxのキャプションとして表示されるように改良しました。
そうすることにより、title属性も使えるし、captionの内容がツールチップとして表示されることもありません。
以下、その改良点について説明します。

lightbox.jpの203行目あたりに、
  start: function(imageLink) {
があります。
この中の
if ((imageLink.rel == 'lightbox')){
のところに、
this.imageArray.push([imageLink.href, imageLink.title]);
とあります。それを次のように書き換えます。

this.imageArray.push([imageLink.href,imageLink.getAttribute('caption')]);

次に、その下の、 else の欄にある
     collect(function(anchor){ return [anchor.href, anchor.title]; }).
を次のように書き換えます。
collect(function(anchor){ return [anchor.href, anchor.getAttribute('caption')]; }).

これにより、Light-boxを適用したい、 <a>タグに追加したcaption属性がLight-boxのキャプションとして表示されます。

<a>タグの記入例
<a href="******.jpg" rel="lightbox[roadtrip]" title="タイトルです" caption="キャプションとして表示" > <img src="&&&&&&.jpg" /> </a>
このように記述すると、caption属性に書いた「キャプションとして表示」がLight-boxのキャプションとして表示され、title属性に書いた、「タイトルです」はキャプションとして表示されません。
しかしサムネイル画像にマウスオーバーした時は、title属性に書いた文字がツールチップとして表示されます。
title属性を記述しなくても問題ありません。

これによって、長いキャプションを書いても、サムネイル画像をマウスオーバーした時にツールチップとして表示されてしまう煩わしさはなくなります。

これから3回にわたってlightbox2.04の改良について報告します。
そのすべてを適用した例を以下に示します。
http://nyankonchi.web.fc2.com/mycats-gallery/mycats2009_7-12/index.html

どなたかの参考になれば幸いです。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメント

非公開コメント

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです
カレンダー
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
プロフィール

webneco

Author:webneco
日々ニャンズ達の妨害と戦いながら、Webデザインを制作しています。

necoのリンク
ニャンコんち

うちの子日誌

猫ママの絵日記
カテゴリ
月別アーカイブ
Feed Me!
necoのひとりごとのRSSフィード
検索フォーム
最新記事
最新コメント
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。