Lightbox 2.0とは？

Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。

Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。

Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。

「Lightbox2のダウンロードサイト」

「Lightbox v2.03.3」と書かれた文字をクリックするとダウンロードが行われます。ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

「解凍した後のlightbox2.03.3フォルダ」

ここで必要になるファイルはindex.html、imagesフォルダに入っているimage-1.jpg、thumb-1.jpg以外全てのファイル/フォルダです。Lightbox 2.0を利用する際には、css、images、jsフォルダをまるごとコピーしないと画像が表示されなかったり表示がおかしくなったりします。これ以降のソースコードはこのフォルダ直下にHTMLとして保存していきます。

*1本稿ではLightboxのバージョン2.03.3で説明しています。