【ハウツー】

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

もっと見る

人気記事

一覧

新着記事

織田裕二、9年ぶりTBS連ドラ主演でIQ246天才貴族に! 土屋・ディーンらと共演
[06:35 8/26] エンタメ
ハーフモデル黒田エイミ、独自のお酒の楽しみ方を披露『アナザースカイ』
[06:00 8/26] エンタメ
二階堂和美、クリス・ハート、平原綾香らが“いのち”をテーマに熱唱
[06:00 8/26] エンタメ
ホームズ風衣装の木村文乃VS美脚バスガイド姿の片瀬那奈、可愛すぎる衣装対決!?
[06:00 8/26] エンタメ
高橋一生、プライド高い料理長役に「本編とEDに高低差!」ギャップにハマる女子続出
[06:00 8/26] エンタメ