最近lightbox.jsというライブラリを使って遊んでいます。
http://www.huddletogether.com/projects/lightbox/
http://www.huddletogether.com/projects/lightbox2/
lightbox.jsは画像のポップアップ表示を可能にするjavascriptライブラリですが、javascriptを一行も書かずとも
<script type="text/javascript" src="js/lightbox.js"></script>
と入れるだけで
あとは
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
とaタグのrel要素のlightboxと書くと利用できてしまうすぐれものです。
コードを見ればわかりますが利用者にjavascriptを書かなくて済むようにするためにonloadでinitLightboxを呼び出してごにょごにょしています。
Ajaxのページではこのonloadでごにょごにょしているというところに注意点があります。たとえばprototype.jsのAjax.Updaterなどで動的にページの一部を更新する場合に、
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
と入れてもonloadが呼び出されたあとだと意味がありません。通常のaタグのまま動作してしまいます。
さて、どうすればいいか。initLightboxでごにょごにょしているところを追ってみます。
ごにょごにょしていますが、重要なところを抜き出すと
lightboxの場合
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
anchor.onclick = function () {showLightbox(this); return false;}
}
lightbox 2の場合（2008/12/06追記: 2.04ではmyLightboxというグローバルな変数は使わなくなっていました）
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
と。どちらもやってることはaタグを探して、ref=”lightbox”であればonclickにshowLightboxを表示しretturn falseし、ページ遷移を抑止する。ということだけです。
つまりは、onload以降にAjaxなどで動的に要素を追加する場合は、それぞれ
<!-- lightbox --> <a href="images/image-1.jpg" rel="lightbox" onclick="showLightbox(this); return false;" title="my caption">image #1</a> <!-- lightbox2 --> <a href="images/image-1.jpg" rel="lightbox" onclick="myLightbox.start(this); return false;" title="my caption">image #1</a>
と明示的にonclickに処理を書いてあげれば良いのです。
これで後から追加されたaタグでもlightboxを表示できます。（2008/12/06追記: 2.04ではmyLightbox変数を使わなくなっておりこの技が使えません）
さて、lightbox 2では複数の画像でスライドショーもどきな表示を行うことができます。
コードを見てみると、表示を開始するところで・・・・
// if image is NOT part of a set..
if((imageLink.getAttribute('rel') == 'lightbox')){
// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
} else {
// if image is part of a set..
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
}
とrel要素でスライドショーする画像を集めていることがわかります。
本家のサイトではスライドショー表示するときには
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
というhtmlを例に出しています。
ここまで見たコードをもとにlightbox2では
- rel要素に’lightbox’という文字が含まれているとonloadでonclickに処理が追加される
- 同じrel要素をもつものでスライドショーが行える
ということが理解できます。
ちなみに先ほどのAjaxの例で明示的にonclickにlightboxを表示する処理を記述した場合は、
rel要素に’lightbox’という文字列を入れる必要はなくなります。（2008/12/06追記: 2.04ではrel=’lightbox’は必須ぽいです）
ですが、rel要素に何も入れない場合には、すべてのaタグでスライドショー表示を行おうとするので注意が必要です。’lightbox’という文字列を入れる必要はありませんが、なんらかの文字列を入れておくとよいでしょう。