【ハウツー】

ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を

1 Lightbox 2.0とは?

 
  • <<
  • <

1/6

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で説明しています。
  • <<
  • <

1/6

インデックス

目次
(1) Lightbox 2.0とは?
(2) Lightbox 2.0を使う
(3) サムネイル画像で表示させる/複数のサムネイルを表示させる
(4) グループ化して表示する
(5) 日本語で表示するようにする
(6) 表示速度や枠幅を指定する

もっと見る

人気記事

一覧

新着記事