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

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

使用方法
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="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;"
画像ギャラリーの定番javascript「LightBox」サンプル

sponsors

「画像ギャラリーの定番javascript「LightBox」」をシェアする

記事作成:
記事URL:

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