Lightbox2～サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示させる＜Ajax

Lightbox2は、サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。
Lightbox2は、「１枚の画像」または「複数画像のグループ」を表示する２つの方法があります。
だだし、スライドショー、大きな画像を画面に合わせて表示や画像を別ウィンドーに表示などができません。
これらを望むには、Piroboxを薦めます。また、Lightbox 2 WordPress Plugin 日本語版については、このサイトを参照。
なお、Lightbox v2.05 旧版は、現在Lightbox2サイトのここからダウンロードできます（2014.9.2)。

【注】2013.6.6 JSフレームワークのPrototypeの古いバージョンを使用しているLightbox v2.05 旧版は、IE9（IE9以上）では動作しません。
Lightbox v2.05（旧版）をIE9で動作させるためには、Prototype.jsを最新版に差し替える必要があります。
最新版「Prototype 1.7.1 (June 5, 2012)」は、http://prototypejs.org/download/からダウンロードできます。

サンプル

１枚の画像
複数画像のグループ

ダウンロード

1. ダウンロードしたLightbox2を解凍します。

   【Lightbox設置例（本ページ）】 []：フォルダ
　　

   |---[images] 表示画像用フォルダ（自分で用意） 
   |      |---[w640]
   |      |      |---P4280326.jpg
   |      |      |---P5100370.jpg など（Width=640 表示画像） 
   |
   |---[lightbox]
          |
          |---[css]
          |     |---lightbox.css
          |   
          |---[images] lightbox.cssとlightbox.jsがこのフォルダ内のLightbox用画像を参照する 
          |     |---close.gif など 
          |        
          |---[js]
          |     |---builder.js
          |     |---lightbox.js
          |     |---prototype.js
          |     |---scriptaculous.js
          |
          |---photo-lightbox.htm 本ページ（自分で用意）

準備

1. Lightbox2の３つのJSファイルをインクルードするタグを、HEADタグ内に書きます。JSファイルのパスは、置いた場所により適宜変更します。


<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>

2. Lightbox2のCSSファイルをインクルードするタグを、HEADタグ内に書きます。CSSファイルのパスは、置いた場所により適宜変更します。


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

3. lightbox.cssで、参照するprev.gifとnext.gifファイルのパスが正しいロケーションかをチェックします。
また、lightbox.jsで、参照するloading.gifとclose.gifファイルのパスが正しいロケーションかをチェックします。

設定

1. 表示したい画像のリンクタグ（Aタグ）に、rel="lightbox"を追加し、lightboxを使用します。（1枚の画像）


<a href="../images/w640/P4280326.jpg" rel="lightbox" title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>

href=：表示画像のURLを設定します。
title=：拡大オーバーレイ画像のパネルに表示されるタイトルを設定します。
src=：表示画像のURLを設定します（サムネール）。
width= / height=：サムネールの大きさを好みにより設定します。

2. もし、複数の画像を1グループとして表示したい場合は、それぞれの画像のリンクタグ（Aタグ）に、 rel="lightbox[グループID]"を追加し、
lightboxを使用します。（複数画像のグループ）


<a href="../images/w640/P2200022x1024.jpg" rel="lightbox[group1]">
                         <img src="../images/w640/P2200022x1024.jpg" width="150" height="112" alt="1" border=0></a>
<a href="../images/w640/P5100370.jpg" rel="lightbox[group1]" title="width:640">
                         <img src="../images/w640/P5100370.jpg" width="150" height="112" alt="2" border=0></a>
<a href="../images/w640/PA200245.jpg" rel="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PA200245.jpg" width="150" height="112" alt="3" border=0></a>
<a href="../images/w640/PB050313.jpg" rel="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PB050313.jpg" width="150" height="112" alt="4" border=0></a>
<a href="../images/w640/PB140339.jpg" rel="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PB140339.jpg" width="150" height="112" alt="5" border=0></a>

rel="lightbox[group1]"：グループIDは、同じIDを設定します。
href=：表示画像のURLを設定します。
title=：拡大オーバーレイ画像のパネルに表示されるタイトルを設定します。
src=：表示画像のURLを設定します（サムネール）。
width= / height=：サムネールの大きさを好みにより設定します。

3. ページの例（まとめ）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<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>

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

</head>
<body>

<!--１つの画像の例-->
<a href="../images/w640/P4280326.jpg" rel="lightbox" title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>

</body>
</html>

（注1）ドキュメントタイプは、例のように書きます。

（注2）ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。

（注3）使用する画像の大きさは、PCの画面からはみ出ない大きさにします。

Lightbox2サイトのTOPページからは、最新バージョンv2.8.1のみダウンロードできます。
旧版などすべてのバージョンのダウンロードは、こちらからできます。

Lightboxページの背景の色（デフォルト：白）を変えるなど、Lightboxのカスタマイズ方法を述べます。下はLightbox表示例。

①：ページの背景　②：画像コンテナの枠　③：データコンテナ ④：CLOSEボタン　⑤：NEXT/PREVボタン　⑥：画像の枚数

Lightboxページの背景色を変更する（lightbox.css）


27 #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Lightboxページの背景色の透明度を変更する（lightbox.js）
```
52 overlayOpacity: 0.8,   // controls transparency of shadow overlay
```
※背景色の透明度は、1を設定すると完全な不透明になり、0を設定すると完全な透明になります。
Lightbox画像コンテナ枠の色（②）及びデータコンテナの色（③）を変更する（lightbox.css）
```
5  #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
19 #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%
```
※上 outerImageContainer は画像コンテナ枠（②）、下 imageDataContainer はデータコンテナ（③）です。
画像コンテナ枠（②）は、表示画像の背景になります。
imageDataContainer（③）には、「CLOSE X」画像、画像のタイトルや表示枚数が表示されます。
通常は、２つは同じ色にします。

Lightbox画像コンテナ枠の幅を変更する（lightbox.css/lightbox.js）
・lightbox.css （注．画像コンテナ枠の幅②）
6 #imageContainer{ padding: 10px; }
・lightbox.js （注．データコンテナ③の横幅を、上と合わせて修正します）

57 borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
ボタン系画像ファイル名を変更する（/lightbox/imagesフォルダ）

・NEXT/PREVボタン（lightbox.css)

16 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } 17 #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

・CLOSE/LOADINGボタン（lightbox.js)

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

※ファイル名を変えずに、ボタン系画像のprev.gif、next.gif、loading.gif、close.gif及びloading.gifを変更したい場合は、 /lightbox/imagesフォルダを差替えます。

Lightboxデータコンテナ上のNEXT/PREVボタンの位置を変更する（lightbox.css）

16 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } 17 #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

※画像コンテナの中央に配置したい場合は、50(%)に修正します。なお、画像コンテナの縦の上端が0%、下端が100%に相当します。下部にボタンを配置したい場合は、95%が良いでしょう。

Lightboxデータコンテナ上の画像枚数の表示方法をを変更する（lightbox.js）

61 labelImage: "Image", 62 labelOf: "of"
修正例→
61 labelImage: "わたしの写真集", 62 labelOf: "/"

Lightboxデータコンテナ上の「画像キャプション」と「画像枚数」の文字色を追加変更する（デフォルトは無定義）（lightbox.js）

23 #imageData #caption{ font-weight: bold; color:#fff; 24 #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; color:#fff;

■ lightbox.css と lightbox.js のデフォルトのソースコード（Lightbox v2.04）（参考）

最終更新日：2013.6.6

No	ビューアー	JSフレームワーク	モーダル window*2	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	PrototypeからjQueryに変更（v2.51)	モーダル	●				●	人気
2	Pirobox	jQuery	モーダル	●				●	推奨
3	Videobox	mootools	モーダル			●
4	Mediabox	mootools	モーダル		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	モーダル	●	●	●	●	●	推奨
6	Colorbox	jQuery	モーダル	●	●	●	●	●
7	Fotorama	jQuery	非モーダル	●	●	●	●	●	スライダー
8	Fancybox	jQuery	モーダル	●	●	●	●	●	人気
※動画とは、SWF、FLV、MOV、WMV（1)　 ※モーダルwindow：画像などメディアの表示は新しい別ウインドー（2）