【ハウツー】

ゼロからはじめる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) 表示速度や枠幅を指定する

もっと見る

特別企画 PR

人気記事

一覧

新着記事

藤原竜也、洋画実写吹き替え初挑戦! 続『インデペンデンス・デイ』主人公役
[04:00 5/25] エンタメ
舞台「ダイヤのA」は薬師戦!真田役は上田堪大、栄純・降谷・御幸は続投
[00:00 5/25] ホビー
アニメ「orange」橋の上で空を見上げるメインキャラ6人のビジュアル
[00:00 5/25] ホビー
「聲の形」の大今良時、今秋にファンタジー新連載開幕!マガジンに予告
[00:00 5/25] ホビー
[浅田真央選手]姉・舞とNMB48冠バラエティーに出演 号泣するメンバーも
[00:00 5/25] エンタメ

特別企画 PR