画像ギャラリーの定番javascript「LightBox」

リリースされた時は驚きでしたが、いまやWeb2.0の代表作LightBoxです。
名前を知らない人でも体験すれば「あ〜、あれか」と思う画像ギャラリーの定番javascriptです。

使用方法
LightBoxからダウロードしたファイル群をアップロードします。
<link rel="stylesheet" href="http://yourdomain/lightbox.css" type="text/css" media="screen">
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://yourdomain/lightbox.js" type="text/javascript"></script>
上記を記述したら、以下のように画像を書き込みます。
<a href="画像" title="キャプション">
<img src="サムネイル画像" width="" height="" alt="">
</a>
さらに複数の画像を対象にしたい場合は以下のようにします。
<a href="画像" title="キャプション" rel="lightbox[demo]"> //[ ]内は何でもok
<img src="サムネイル画像" width="" height="" alt="">
</a>
<a href="画像" title="キャプション" rel="lightbox[demo]"> //[ ]内は上と一緒
<img src="サムネイル画像" width="" height="" alt="">
</a>
またキャプションにはリンクを書くこともできます。
title="<a href="link.html">my link</a>"
画像ギャラリーの定番javascript「LightBox」サンプル

2007年12月16日

前の記事：何にでも影を付けられるjavascript「Drop Shadow」
次の記事：可視部分の画像のみを読み込むjavascript「lazierLoad 」

関連記事

• 画像に3Dの反射効果を与えるjavascript「3d image reflection with javascript」
• クールなニューススティッカーjavascript「JavaScript News Sticker」
• iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」