画像のオーバーレイ表示スクリプト「Lightbox 2」の使い方

リンクをクリックすることで画面遷移なしに画像をオーバーレイ表示スクリプトは、多数公開されていますが、その中でも比較的シンプルに使用可能な「Lightbox 2」の使い方を紹介。

「Lightbox 2」を使うには、Webサイトからスクリプトをダウンロードします。
ダウンロードしたZIPファイルの中には、「css」、「images」、「js」フォルダの他に「index.html」がありますが、「index.html」不要なのでこれ以外のフォルダを利用したいWebサイトの適当なディレクトリに保存します。

この時注意が必要なのは、「js」と「images」との位置関係で、ZIPに入っていたままで使用する場合には、「js」フォルダの中にある「lightbox.js」の修正が必要になります。

修正が必要なのは「//  Configurationl」の部分の以下の２箇所

fileLoadingImage:'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

この「images」へのパスを「Lightbox 2」を使用するコンテンツからの相対パスで書きなおすことが必要です。
※「lightbox.js」からの相対パスでは無いので要注意。

あとは、Webサイトに書かれているスクリプトへのパス

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

CSSへのパス

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

これらを、「Lightbox 2」を使用するコンテンツのヘッダーに追加します。

次にイメージへのリンクに「rel="lightbox"」を追加すればOK。

同じページ内の画像を「next/prev」ボタンで順に見られるようにするには「rel="lightbox[同じ名称を半角英数]"」を追加すると、同じ名称のものが順に見られるようになります。

画像の説明を画面の左下に表示したい場合にはリンクに「title="日本語でもOKを記述"」を追加」すると表示されるようになります。

フルに書くとこんな感じ

<a href="/images/sample.jpg" rel="lightbox[sampleimages]" title="サンプル画像">

画像を今風な感じに表示させてみたい方は試してみてはどうでしょうか？

Lightbox 2： http://www.huddletogether.com/projects/lightbox2/