ライトボックスをお手軽に実装できるためのライブラリは「lightbox」で検索してみると分かるとおりサイト上にたくさんあって、大変ありがたい。
その中で個人的に「Lightbox 2」が気に入ったので、その導入事例をご紹介。

Lightbox 2 を使うための最小設定のサンプル

必要なファイル

※必要なファイルはすべて、Lightbox 2からダウンロードできます。

javascriptファイル

• jquery-1.7.2.min.js（jQuery）
• lightbox.js

すでにjQueryを導入済みであれば「jquery-1.7.2.min.js」は不要。

CSSファイル

• lightbox.css

画像1

• close.png
• loading.gif
• next.png
• prev.png

画像2

• ライトボックスで表示したい画像とライトボックスを表示させるためのサムネイル画像

設置方法

1枚ごとにライトボックスする場合

images/examples/image-2.jpg

大きい画像URL

[重要] rel="lightbox"

この属性をaタグ要素に追加することでライトボックスが機能します。

title="キャプションあり"

ここにセットしたテキストがライトボックスの左下に表示されます（テキストを表示させたいときのみ必要）。

images/examples/thumb-2.jpg

サムネイル画像URL

ライトボックス表示時上でページ送りをしたい場合

lightbox[a]

relの値を「[]」の中を共通にすることでライトボックス表示時上でページ送りができるようになります。

同じページでライトボックスを複数設置したい場合

lightbox[a]

lightbox[b]

relの値を「[]」の中が共通であるグループを複数用意すると、その分だけライトボックスが設定できます。