Lightbox 2.0 設定方法
Lightbox とは？
Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。
Lightbox 2.0の大きな特長としてスクリプトを記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。
DOWNLOAD
Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます。
DOWNLOAD の下にある「Lightbox v2.04」と書かれた文字をクリックすればダウンロードできます。（2008/7/24 の時点で v2.04）
ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。
lightbox2.04.zip
./ css
lightbox.css
./ image
bullet.gif
close.gif
closelabel.gif
donate-button.gif
download-icon.gif
loading.gif
nextlabel.gif
prevlabel.gif
image-1.jpg
thumb-1.jpg
./ js
builder.js
effects.js
lightbox.js
prototype.js
scriptaculous.js
ここで必要になるファイルはindex.html、imagesフォルダに入っているimage-1.jpg、thumb-1.jpg以外全てのファイル / フォルダです。Lightbox 2.0を利用する際には、css、images、jsフォルダをまるごとコピーしないと画像が表示されなかったり表示がおかしくなったりします。これ以降 のソースコードはこのフォルダ直下にHTMLとして保存していきます。
Lightbox 2.0 を設置する
Lightbox 2.0は非同期通信などの処理にprototype.jsライブラリ、エフェクト処理にscriptaculousライブラリを使用しています。これらの ライブラリはLightbox 2.0をダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。Lightbox 2.0を使用する前には、これら2つのライブラリを読み込ませる必要があります。読み込ませる時には必ず<head>内の<script>タグで最初にprototype.jsライブラリ、次にscriptaculousライブラリの順番で読み込ませます。
古いバージョンの場合は scriptaculous.js?load=effects となっている場合がありますが、v2.04では builder を追加してscriptaculous.js?load=effects,builder と書かないとエラーになります。
次にLightbox 2.0のスクリプトとスタイルシートファイルであるlightbox.cssも読み込ませます。
設置するパスは自分の環境に合わせて変えて下さい。
<!-- LIGHTBOX 2.0 --> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css"> <!-- END LIGHTBOX 2.0 -->
これでLightbox 2.0を利用する準備が完了です。
Lightbox 2.0 の使い方
Lightbox 2.0ではリンクがクリックされると実画像をエフェクト付きで表示します。この設定は以下のように<a>タグのrel属性でlightboxの文字を指定するだけです。
タイトルを表示させたい時には、title属性を追加してあげれば記入することができます。
<a href="img/000.jpg" rel="lightbox" title="枝垂れ桜">サンプル</a>
文字ではなくサムネイル画像を表示させる場合は。以下のように<img>タグでサムネイル画像を表示するようにします。
<a href="img/000.jpg" rel="lightbox" title="枝垂れ桜"> <img src="img/000s.jpg" alt="" width="120" height="90" border="0" /> </a>
Lightbox 2.0では複数の画像をグループとしてスライド表示させることができます。ただし、一定時間ごと自動的に画像が切り替わるわけではなく、クリックまたはキーボード操作により切り替わるようになっています。グループ化するには<a>タグのrel属性にlightbox[グループ名]と指定します。グループ名が同じであれば1セットとしてみなされ処理されます。例えば872というグループ名にした場合には以下のようになります。
グループ化されている場合は単独で表示する場合と異なり、画像の上方の左右にマウスカーソルを重ねるとPREV、NEXTの画像が表示され、クリッ クすると前後の画像が表示されます。キーボードでも操作でき、1つ前の画像を表示するにはPキー、次の画像を表示するにはNキーを押します。
Lightbox 2.0で設定できるグループ名の数には制限がないので異なる名前を指定すれば複数のグループとして利用できます。
各種パラメーター
Lightbox 2.0では表示速度や背景の不透明度を設定することができます。設定が反映されないものもありますが、[lightbox.js]内の以下のパラメータを指定することができます。
| 変数名 | 初期値 | 内容 |
|---|---|---|
| fileLoadingImage | images/loading.gif | 読み込み中を示す画像URL |
| fileBottomNavCloseImage | images/closelabel.gif | CLOSEボタンの画像URL |
| overlayOpacity | 0.8 | 背景の不透明度 (1で真っ黒) |
| animate | true | リサイズ時のアニメーション (true : アニメーションする、false : しない) |
| resizeSpeed | 7 | リサイズ時の速度 (1 : 低速、10 : 高速) |
| borderSize | 10 | 枠のサイズ(余白) |
LOADING画像やCLOSEボタンがパラメーターをいじっても表示されない時は、CSSをいじって無理矢理表示させてしまいましょう。
#loadingLink と #bottomNavClose がLOADING画像とCLOSE画像のCSSです。
#loadingLink { background-image: url(../images/loading.gif); width: 32px; height: 32px; }
#imageData #bottomNavClose { background-image: url(../images/closelabel.gif); background-repeat: no-repeat; width: 66px; height: 30px; float: right; outline: none medium; }
その２行を見つけ出して、上記のように書き換えてしまえば表示させることができます。
ただし、画像ファイルやCSSファイルを移動してしまった場合は表示されない場合があるので、その場合は background-image のパラメーターを自分の環境に合わせて変更して下さい。
