サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
Lightboxの使い方[Lightbox v2.51 - 2012/4/20 旧バージョン]
サンプル使用方法LightboxのダウンロードLightboxのカスタマイズ(応用編)Lightbox v2.51 with print buttonバージョン
Lightbox v2.05 版Lightbox v2.51 2012.4.20 版Lightbox v2.7.1 2014.3.30 版Lightbox v2.8.1 2015.07.09 最新版

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

サンプル

  1. 1枚の画像


  2. 複数画像のグループ
    1 桜咲く2010年2月21日 2 バラ 3 雲 4 国立昭和公園の秋 5 夕焼け
使用方法
ダウンロード
 
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の2つの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.gifnext.gifファイルのパスが正しいロケーションかをチェックします。
  また、lightbox.jsで、参照するloading.gifclose.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>

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

</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。
Lightboxのダウンロード
Lightboxのカスタマイズ(応用編)修正例 (修正値は赤字) ≫カスタマイズのサンプルデモ

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

v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
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画像コンテナ枠の色(B)及びデータコンテナの色(E)を変更する(別々の色に修正した)(lightbox.css) - #000033: midnightblue
 37 .lb-outerContainer {
 38  position: relative;
 39  background-color: #000033; /*画像コンテナ枠の色(B)*/
 (途中省略)
125 .lb-dataContainer { background-color: navy; /*データコンテナの色(E)追加*/
4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css-.lb-container)(C)
58 .lb-container {
59  padding: 20px;
60 }
5. CLOSEボタン画像を変更する(lightbox.js)(H)
52 fileBottomNavCloseImage: 'images/close-red.png',
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する(lightbox.css-.lb-prev:hover/.lb-next:hover)(F,G)
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)(F,G)
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)(D)
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)(D)
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 }


 
■ lightbox.css と lightbox.js のデフォルトのソースコード(Lightbox v2.51)(参考:修正前)

サンプル使用方法LightboxのダウンロードLightboxのカスタマイズ(応用編)


Lightbox系メディアビューア(まとめ サイト内リンク)

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

動画関連サイト内リンク


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