2009年2月14日土曜日

ligthboxのタイトル表示

ホームページで画像表示にLightBox2を使いましたが、タイトル表示にちょっと問題がありました。ちょこっと手を入れてみたので、メモっときます。

lightboxといえば、WILLCOMストアの2009春 新機種ラインアップページ画像表示が、そのまんまLightBoxで作られてました。lightboxではhtmlタグにtitle=""で指定した文字列を画像の下に表示します。同じグループ名をつけた写真ではNext,Prevボタンで連続して画像が表示できますが、このときタイトルがついた画像とついてない画像が混在していると、タイトルをつけなかった画像に直前に表示した画像のタイトルがそのまま適用されてしまいました(FireFox,safariで確認)
titleが空白は存在しない場合は表示を隠すように書き換えました

さらに、タイトル以外に補足説明を入れたかった(たとえばWILLCOMストアの画像にマウスを乗っけると "wx430k<br \>シンプルな中に上質な..."のようにポップアップが出るのが嫌だった)ので、ちょっと改造して、リンクタグに内包するテキストを表示するようにしてました。

改造部分
lightbox.js

Lightbox.prototype = {
...
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'comment'}),
Builder.node('span',{id:'numberDisplay'})
...


start: function(imageLink) {
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title , imageLink.textContent
]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title , anchor.textContent ]; }).
uniq();
...

updateDetails: function() {

// if caption is not null
if (this.imageArray[this.activeImage][1] !=undefined & this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
else
{
this.caption.update(this.imageArray[this.activeImage][1]).hide();
}
if (this.imageArray[this.activeImage][2] !=undefined & this.imageArray[this.activeImage][2] != ""){
this.comment.update("<p>" + this.imageArray[this.activeImage][2] +"</p>").show();
}
else
{
this.comment.update("<p>" + this.imageArray[this.activeImage][2] +"</p>").hide();
}




ただし、IEだとcomment部分が表示できませんでした。もう少しやり方を考えたほうがよさそうです

0 件のコメント: