lightboxをクリッカブルマップで利用する。

lightboxをクリッカブルマップで利用してみる。クリッカブルマップの場合はa要素の代わりにarea要素に対してrelやtitleを設定する。が、こうした場合にFireFoxでは背景が黒く半透明にはなるのだけれど、肝心の画像が表示されなくなってしまう。IE6や7では問題ないのだけれど。

lightbox.jsを調べてみると、190行目あたりで、area要素のrel属性を取得し、それを行目のstartクラスへ渡している様子。しかしFireFoxの場合、rel要素の取得時にはその取得した値はtargetに入っているのだけれど、startクラスへ値が渡されたときにはその引数はUndefinedとなっており、結果的にrel属性が未定義扱いとなるみたい。いろいろと試行錯誤をしてみたところ、rel属性をlang属性に変更するとうまく動く。その理由については時間のある時に調べるとして、ときにその方法だけメモ。

まず、下記のtarget変数に値を代入する式において、relをlangに変更する(2カ所)。

document.observe('click', (function(event){
var target = event.findElement('a[lang^=lightbox]') || event.findElement('area[lang^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));

続けて、rel属性(変更後はlang属性)の属性値判定部分もrelからlangへ変更する(3カ所)。

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

最後に、html内のarea要素に記述するrel属性をlangに置き換える。

<area shape="rect" coords="194,143,227,168" href="img/image.jpg" lang="lightbox[cat01]"  title="title"/>

とりあえず動いたけれど、いいのかなあ。。。

2010/08/03 文言の修正、行番号の追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA