画像の拡大表示や簡単なスライドショーに便利！

下記サイトからダウンロードできます。
http://www.huddletogether.com/projects/lightbox2/

■使い方は
ダウンロードしたデータをディレクトリに展開してheadタグ内に下記を追加します。
※ファイルのパスはご自分の環境に合わせて変更してください。
<!-- lightbox --> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>
そしてbodyタグ内で <a href="gazou1D.jpg" rel="lightbox[group]" title="タイトル1"><img src="gazou1.jpg" alt="" width="90" height="90" /></a> <a href="gazou2D.jpg" rel="lightbox[group]" title="タイトル2"><img src="gazou2.jpg" alt="" width="90" height="90" /></a> <a href="gazou3D.jpg" rel="lightbox[group]" title="タイトル3"><img src="gazou3.jpg" alt="" width="90" height="90" /></a>
上記コードではaタグ内のhrefで拡大後の画像を指定！
※gazou1D.jpg、gazou2D.jpg、gazou3D.jpgは拡大後の画像です。
aタグで囲まれたimgタグで拡大前の画像を指定
※gazou1.jpg、gazou2.jpg、gazou3.jpgは拡大前の画像です。
lightbox[group]で画像をグループ化してスライドショーのようにつかえます。
上記の3つの画像は[group]の部分で同一のグループにしてします。
title="タイトル1"で画像にキャプションをつけられます。長い場合はtitle="タイト<br />ル1"のように改行も可能です。

管理人のサイトでも利用させて頂いております。
http://f-sketch.main.jp/gallery/

作成日時:2010年1月17日 21:19