TOP
MEMO
WEB
Lightbox 2.0 設定方法

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.05」と書かれた文字をクリックすればダウンロードできます。（2012/1/21 の時点で v2.05）
　ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

lightbox2.05.zip

index.html

./ 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

　　lightbox-web.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" media="screen" />
<!-- 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	枠のサイズ(余白)

　特に注意が必要なのは、fileLoadingImageとFileBottomNavCloseImageのパラメーターです。初期状態ではimages/loading.gifとimages/closelabel.gifになっているので、自分の設定にあわせて変更してあげましょう。
初期設定では相対パスになっているので、絶対パスにしてあげた方がよいでしょう。