LightBoxのJQuery版 JQuery lightBox plugin2008-02-05

jQuery lightBox pluginは、リンク先の画像をかっちょよく表示できるLightBox 2のjQuery版です。
使い方はいたって簡単。

適用したい画像を囲んでるアンカーへのセレクタを指定。
セレクタの指定方法はjQueryと同じ

$(function() {
	$("ここにセレクタ").lightBox();
});

例えば、↓のようなHTMLに適用したい場合

<p class="image-list">
	<a href="img1.jpg" class="image-link">
		<img src="thumb_img1.jpg" alt="image 1" />
	</a>
	<a href="img2.jpg" class="image-link">
		<img src="thumb_img1.jpg" alt="image 2" />
	</a>
	<a href="img3.jpg" class="image-link">
		<img src="thumb_img1.jpg" alt="image 3" />
	</a>
	<a href="img4.jpg" class="image-link">
		<img src="thumb_img1.jpg" alt="image 4" />
	</a>
</p>

JavaScriptでは、↓のように。
$(".image-list a").lightBox();

↓これでもOK
$(".image-link").lightBox();

ちなみに、アンカーのリンク先が、画像以外だと、そこでロードがストップになりますのでご注意を

• jQuery lightBox plugin
• jQuery
• LightBox 2