Lightbox2を設定してみましょう
■Lightboxパーツはダウンロードしましたか？
ダウンロードテンプレートにはLightboxのファイルが梱包されていないので、こちらの解説を読んで、必要なパーツを準備しておいて下さい。
■まずはギャラリー用の写真を準備しましょう
サムネイル用の小さな写真(230px×230px)と、クリック時の大きな写真をセットで準備しておきます。大きな写真については、ウィンドウサイズから余裕をもったサイズにしておきましょう。今のバージョンは未確認ですが、昔のバージョンだと表示に不具合があったので。
■通常の手順でサムネイル画像を配置します。以下がソースコードサンプルですがこの状態だと普通の写真を配置したボックスの状態です。
--------------------------------------
<div class="box1">
<img src="images_photo/IMG_2152_mini.jpg" width="230" height="230" alt="" />
<p>Gogh Himawari</p>
</div>
--------------------------------------
■これにリンクを設定しましょう。リンク先は大きな写真画像に対して直接行います。
--------------------------------------
<div class="box1">
<a href="images_photo/IMG_2152.JPG" rel="lightbox" title="ここに簡単な説明を入れることができます。"><img src="images_photo/IMG_2152_mini.jpg" width="230" height="230" alt="" /></a>
<p>Gogh Himawari</p>
</div>
--------------------------------------
rel="lightbox"と追加してあげる事でLightboxが動きます。title指定は、Lightbox起動時に写真の下に出ているテキスト部分になります。
指定は以上です。とても簡単です。
注意点
大きな写真への直接リンクですが、拡張子を大文字と小文字とで間違えないように注意して下さい。「jpg」と「JPG」などです。新しいブラウザだとちゃんと認識して表示しますが、IE6だと画像を取得できずループが回ってる状態でした。
１枚ずつ独立して表示させる場合
各サムネイルをクリックするとイメージ画像が展開します。ウィンドウを閉じる場合は×アイコンをクリック。
Gogh Himawari
Ranunculus
Ajisai
グループで指定している画像を次々表示させる場合
サムネイルをクリックするとイメージ画像が展開します。写真上にカーソルをのせると次(前)の写真への矢印アイコンが出てきます。矢印アイコンをクリックすれば次(前)の写真を見る事ができます。このグループを使うには、rel="lightbox"をrel="lightbox[plants]"のように変更すればOK。plants部分がグループ名になります。
▼グループ（植物）
Gogh Himawari
Ranunculus
Ajisai
▼グループ（お城）
大阪城
明治神宮
金閣寺