コンテンツ開始

2009年08月29日


Lightbox を使った画像のギャラリー表示を範囲指定で簡単に

使い方は簡単です。
lightbox.js が使える環境で、以下のスクリプトを Lighbox.js の下で追加します。
せっかく、prototype.js が組み込まれているので、rel="lightbox[galleryname]" の属性セット
は JavaScript にさせています。複数のギャラリーは a を全て用意してから、一気に 
Lightbox.setGallery を複数回実行するといいです

ここは、他のライブラリとの関連で見栄えが違いますので、
正しい表示はこちらを参照して下さい
<script type="text/javascript">
Lightbox.setGallery = function (s){
($A($(s).
getElementsByTagName('a'))).
each(function(Element){Element.setAttribute("rel","lightbox["+s+"]")}); 
}
</script>

その後に、画像を以下のように挟んで、その下で Lightbox.setGallery()
を実行するだけです。
<span id=gallery1>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248268708270468.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248268708270468-thumb.png" />
</a>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248097047143143.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248097047143143-thumb.png" />
</a>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248012765169597.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248012765169597-thumb.png" />
</a>
</span>
<script type="text/javascript">Lightbox.setGallery("gallery1")</script>
posted by at 2009-08-29 01:43 | ブログパーツ | このブログの読者になる | 更新情報をチェックする
コンテンツ終了
右サイド開始
コンテナ終了 base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX