skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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: 'の'
}
);
});
jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」サンプル

記事作成：2007年11月27日

前の記事：検索で使用したキーワードをハイライト表示するjavascript「searchhi.js」
次の記事：フォームで複数ファイルを送信するjavascript「Multiple file upload」