【ハウツー】

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

1 Lightbox 2.0とは?

古籏一浩  [2007/06/14]
  • <<
  • <

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) 表示速度や枠幅を指定する

もっと見る

人気記事

一覧

新着記事

[ふたがしら2]松ケン主演時代劇続編9月17日放送決定 成宮と菜々緒の濃密シーンも健在
[08:00 6/25] エンタメ
お金がない休日の過ごし方
[08:00 6/25] マネー
【連載】鉄道トリビア 第360回 電車の運転中、運転士がガムを噛むことは認められている
[08:00 6/25] ホビー
【連載】1コマ漫画 ホモサピエンス取扱説明書 第691回 人を叱る時には大事なことよね
[08:00 6/25] 趣味
遠藤憲一、悪い刑事役で真骨頂の演技を披露!“乾いた笑顔”が恐すぎる
[07:00 6/25] エンタメ