<head> <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> </head> 〜写真が一つだけの時〜 <a href="photoimage/scan04.jpg" rel="lightbox" title="写真"> <img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a> 〜写真が複数あってグループ化するとき〜 <a href="photoimage/scan04.jpg" rel="lightbox[kouzan]" title="写真1"> <img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a> <a href="photoimage/scan05.jpg" rel="lightbox[kouzan]" title="写真2"> <img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a> <a href="photoimage/scan06.jpg" rel="lightbox[kouzan]" title="写真3"> <img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a> <a href="photoimage/scan07.jpg" rel="lightbox[kouzan]" title="写真4"> <img src="photoimage/scan04_R.jpg" width="160" height="112" alt=""/></a>
ここでは、写真のファイルはxhtmlファイルのあるフォルダにphotoimageフォルダを作り、その中に入れています。また、ligthbox関係のファイルは1つ上の階層にあるcssフォルダ、imagesフォルダ、jsフォルダに入っています。この部分については各自の環境により変更しないといけません。また、titleの部分に説明を入れると、各写真の説明が拡大時に出てきます。
JavaScriptが有効ならば別ウインドウ(タグ)で開きます。
http://www.hunddletogether.com/projects/lightbox2
ここから手に入れた圧縮ファイルを解凍すると、cssフォルダとimagesフォルダ、jsフォルダが作成されます。このフォルダ名は変えない方がいいでしょう。そして、これらを左のようにリンクします。このとき、prototype.jsはlightboxに同封されているものでないと不都合が出る場合があります。もしも画像などのフォルダを変えたりする場合は、lightbox.jsの内容を一部変えないといけません。
<a href="photoimage/scan04.jpg" rel="lightbox" title="写真">のようにrelに"lightbox"とします。下の写真をクリックして下さい。
<a href="photoimage/scan04.jpg" rel="lightbox[kouzan]" title="写真">のようにrelに"lightbox[kouzan]"とします。[]の部分はグループ化したい画像はすべて共通にします。これにより、サムネイルをクリックするとlightboxが立ち上がり、大きな画像がエフェクトとともに現れ、画像の右端や左端にマウスカーソルを持って行くと次の画像に行けるようになります。下の写真のどれかをクリックして下さい。