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

jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」

｜ ｜ ｜ ｜ ｜ ｜ ｜

LightBoxをjQueryで実現するJavaScriptは以前jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」で紹介しましたが、今回紹介する方が高機能で柔軟性があるかもしれません。
jQuery Lightbox Plugin (balupton edition)です。

使用方法 jQuery Lightbox Plugin (balupton edition)からjquery.lightbox.jsとjquery.lightbox.packed.cssを、jQueryからjquery.jsをダウンロードします。
次にhead内に以下を加えます。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="http://yourdomain/jquery.lightbox.packed.css">
あとは画像をいつものLightBoxのように記述します。
<a href="画像パス" title="タイトル" rel="lightbox[]">
<img src="画像サムネイル">
</a>
その他、js内で調整可能です。
※jquery.lightbox.jsの460行目あたり。
jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」サンプル
(追記：2008/9/8)
コメントいただきましたように、jsファイルを無駄に書き換えなくてもいけるようです。
<script type="text/javascript">
$(function(){
$.Lightbox.construct({
show_linkback: false,
text: { image: 'Photo' }
});
});</script>

記事作成：2008年08月26日

前の記事：ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
次の記事：スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」