GALLERY1
蓮の葉
花束
ゴッホひまわり
もみじ
プリザーブドフラワー
蓮の花
Lightbox2を設定してみましょう
■Lightboxパーツはダウンロードしましたか？
ダウンロードテンプレートにはLightboxのファイルが梱包されていないので、こちらの解説を読んで、必要なパーツを準備しておいて下さい。
■Lightboxを使わない場合
gallery1.htmlとgallery2.htmlのhtmlの上の方に入っている以下の３行を削除してご利用下さい。
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
■まずはギャラリー用の写真を準備しましょう
サムネイル用の小さな写真(横200px、縦150px)と、クリック時の大きな写真をセットで準備しておきます。大きな写真については、ウィンドウサイズから余裕をもったサイズにしておきましょう。今のバージョンは未確認ですが、昔のバージョンだと表示に不具合があったので。
■通常の手順でサムネイル画像を配置します。以下がソースコードサンプルですがこの状態だと普通の写真を配置したボックスの状態です。
--------------------------------------
<div class="photobox">
<img src="images_photo/IMGP2678_mini.jpg" width="200" height="150" alt="" />
<p>蓮の葉</p>
</div>
--------------------------------------
■これにリンクを設定しましょう。リンク先は大きな写真画像に対して直接行います。
--------------------------------------
<div class="photobox">
<a href="images_photo/IMGP2678.jpg" rel="lightbox" title="ここに簡単な説明を入れることができます。"><img src="images_photo/IMGP2678_mini.jpg" width="200" height="150" alt="" /></a>
<p>lotus leaves</p>
</div>
--------------------------------------
rel="lightbox"と追加してあげる事でLightboxが動きます。title指定は、Lightbox起動時に写真の下に出ているテキスト部分になります。
指定は以上です。とても簡単です。
注意点
大きな写真への直接リンクですが、拡張子を大文字と小文字とで間違えないように注意して下さい。「jpg」と「JPG」などです。新しいブラウザだとちゃんと認識して表示しますが、IE6だと画像を取得できずループが回ってる状態でした。
１枚ずつ独立して表示させる場合
各サムネイルをクリックするとイメージ画像が展開します。ウィンドウを閉じる場合は×アイコンをクリック。
蓮の葉
花束
ゴッホひまわり
もみじ
プリザーブドフラワー
蓮の花
グループで指定している画像を次々表示させる場合
サムネイルをクリックするとイメージ画像が展開します。写真上にカーソルをのせると次(前)の写真への矢印アイコンが出てきます。矢印アイコンをクリックすれば次(前)の写真を見る事ができます。このグループを使うには、rel="lightbox"をrel="lightbox[group1]"のように変更すればOK。group1部分がグループ名になります。必要に応じて名前は変えてもらってOK。
▼グループ１
蓮の葉
花束
ゴッホひまわり
▼グループ２
もみじ
プリザーブドフラワー
蓮の花