jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」

Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。
今では画像を表示する多くのブログで使用されています。
今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。

使用方法

jQuery lightBox pluginからファイル群をアップロードします。

<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.lightbox-0.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/jquery.lightbox-0.3.css" media="screen">
<script type="text/javascript">
	$(function() {
		$('#id名 a').lightBox();  //(' ')内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
	});
</script>

上記を記述したら、あとは指定したid内で、サムネイル画像に大きく表示させたい画像をリンクさせれば完成です。


<div id="id名">
<a href="大きい画像" title="キャプション">
	<img src="サムネイル画像" width="" height="">
</a>
</div>

また既存のLightBoxにはなかった機能として以下のようなものがあります。

オーバーレイの色変更：overlayBgColor: '#FFF'
オーバーレイの透明度：overlayOpacity: 0.6
文字1：txtImage: '画像'
文字2：txtOf: 'の'

$(function() {
	$('#gallery a').lightBox({
		overlayBgColor: '#FFF',
		overlayOpacity: 0.7,
		txtImage: '画像',
		txtOf: 'の'
		}
	);
});

サンプル

Javascriptサンプルページ一覧

skuare.net