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

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

サンプル

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

ダウンロード

1. ダウンロードしたLightbox2（v2.51）を解凍し、下のように配置します。

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


   |---[images] 表示画像用フォルダ（自分で用意） 
   |      |---[w640]
   |      |      |---P4280326.jpg
   |      |      |---P5100370.jpg など（Width=640 表示画像） 
   |
   |---[lightbox251]
          |
          |---[css]
          |     |---lightbox.css
          |   
          |---[images] lightbox.cssとlightbox.jsがこのフォルダ内のLightbox用画像を参照する 
          |     |---close.png
          |     |---loading.gif
          |     |---next.png
          |     |---prev.png
          |     |---close-red.png 本ページで使用（自分で用意）
          |     |---その他画像ファイル 本ページで使用（自分で用意）
          |
          |---[js]
          |     |---jquery-1.7.2.min.js
          |     |---lightbox.js
          |     
          |     
          |---photo-lightbox.html 本ページ（自分で用意）

          ※青字のファイルは、Lightbox2サイトからダウンロードしたファイル

準備

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

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></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/jquery-1.7.2.min.js"></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の画面からはみ出ない大きさにします。

最新版（v2.8.1)
Lightbox2サイトのTOPページからは最新版のみダウンロードできます。

（Lightbox最新版（lightbox-2.8.1.zip)ダウンロード画面）
旧版などすべてのダウンロードページはこちら--＞ https://github.com/lokesh/lightbox2/releases

最終更新日：2013.2.17 v2.51,2014.8.30

1. Lightboxページの背景色を変更する（lightbox.css-#lightboxOverlay）（①）- #003300：■ iron green
	`2 #lightboxOverlay { （途中略） 7 　background-color: #003300;`
2. Lightboxページの背景色の透明度を変更する（lightbox.css-#lightboxOverlay）（①）
	2 #lightboxOverlay { （途中略） 8 　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); 9 　opacity: 0.2; ※ 8 filter-opacity場合　0（完全に透明）～ 100（完全に不透明）の範囲で指定する（初期値は100） ※ 9 opacityの場合　0.0（完全に透明）～1.0（完全に不透明）の範囲で指定する（初期値は1）
3. Lightbox画像コンテナ枠の色（③）及びデータコンテナの色（⑥）を変更する（別々の色に修正した）（lightbox.css） - #000033：■ midnightblue
	`37 .lb-outerContainer { 38 　position: relative; 39 　background-color: #000033; /画像コンテナ枠の色（③）/ 　（途中省略） 125 .lb-dataContainer { background-color: navy; /データコンテナの色（⑥）追加/`
4. Lightbox画像コンテナ枠の幅を変更する（lightbox.css-.lb-container）（④）
	`58 .lb-container { 59 　padding: 20px; 60 }`
5. CLOSEボタン画像を変更する（lightbox.js）（⑨）
	`52 fileBottomNavCloseImage: 'images/close-red.png',`
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する（lightbox.css-.lb-prev:hover/.lb-next:hover）（⑦,⑧）
	`115 .lb-prev:hover { 116 　background: url(../images/prev.png) left 95% no-repeat; 117 } 119 .lb-next:hover { 120 　background: url(../images/next.png) right 95% no-repeat; 121 }` ※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。
6.2 Lightboxコンテナ上のNEXT/PREVボタンを画像の外に表示する（lightbox.css-.lb-prev:hover/.lb-next:hover/.lb-prev/.lb-next）（⑦,⑧）
	103 .lb-prev { 104 　left: -120px; /left: 0;/ 105 　position: absolute; background: url(../images/prev.png) left 48% no-repeat; /float: left;/ 106 } 107 /* line 76, ../sass/lightbox.sass / 108 .lb-next { 109 　right: -120px; /right: 0;/ 110 　position: absolute; background: url(../images/next.png) right 48% no-repeat; /float: right;/ 111 } 115 /.lb-prev:hover { 116 　background: url(../images/prev.png) left 95% no-repeat; 117 }/ 119 /.lb-next:hover { 120 　background: url(../images/next.png) right 95% no-repeat; 121 }/ ※left rightの値は単位pxを付けます。例-120px ※.lb-prev:hoverと.lb-next:hover*はコメント化にします。NEXT/PREVボタンは常に表示されます。
7. Lightboxデータコンテナ上の画像枚数の表示方法をを変更する（lightbox.js）（⑤）
	`50 function LightboxOptions() { 51 　this.fileLoadingImage = 'images/loading.gif'; 52 　this.fileCloseImage = 'images/close-red.png'; /前項5. CLOSEボタン画像を変更する関連/ 53 　this.resizeDuration = 700; 54 　this.fadeDuration = 500; 55 　this.labelImage = "★公園の風景★"; /* Imageを★公園の風景★に変更/ 56 　this.labelOf = "/"; / ofを/に変更（何枚中何枚目の表示例 7of15→7/15）*/ 57 }`
8. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する（デフォルトは未定義）（lightbox.css）（⑤）
	`161 .lb-data .lb-caption { 162 　font-size: 13px; 163 　font-weight: bold; 164 　line-height: 1em; 　　color:#fff; /画像キャプション　1行追加　白色/ 165 } 166 /* line 107, ../sass/lightbox.sass / 167 .lb-data .lb-number { 168 　display: block; 169 　 clear: left; 170 　padding-bottom: 1em; 171 　font-size: 11px; 　　color:yellow; /画像枚数　1行追加　黄色*/ 172 }`

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）