サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
Lightboxの使い方[Lightbox v2.8.1 - 2015-07-09 最新バージョン]
サンプル使用方法LightboxのダウンロードLightbox v2.8.1のカスタマイズ
Lightbox v2.05Lightbox v2.51 2012.4.20版Lightbox v2.7.1 2014.3.30版Lightbox v2.9.0 15SNSソーシャルボタン対応 2017.5.25初版

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

サンプル

  1. 1枚の画像


  2. 複数画像のグループ
    1 風景 2 風景 3 風景 4 風景 5 風景
使用方法
ダウンロード
 
1. ダウンロードしたLightbox2(v2.8.1)ファイル名:lightbox2-master.zipを解凍し、下のように配置します。
   【Lightbox v2.8.1 設置例(本ページ)】 []:フォルダ


   |---[images] 表示画像用フォルダ(自分で用意) 
   |      |---[w640]
   |      |      |---P4280326.jpg
   |      |      |---P5100370.jpg など(Width=640 表示画像) 
   |
   |---[lightbox281] 配下にdistフォルダ内のcss,images,js各フォルダのファイルを配置する
          |
          |---[css]
          |     |---lightbox.css
          |   
          |---[images] lightbox.cssとlightbox.jsがこのフォルダ内のLightbox用画像を参照する 。
          |     |---close.png
          |     |---loading.gif
          |     |---next.png
          |     |---prev.png
          |     |---close-red.png 本ページで使用(自分で用意)
          |     |---その他画像ファイル 本ページで使用(自分で用意)
          |
          |---[js]
          |     |---lightbox.js
          |     |---lightbox.min.js
          |     |---lightbox-plus-jquery.js  lightbox.js + jQueryファイル *1 
          |     |---lightbox-plus-jquery.min.js lightbox.js + jQueryファイル *1
          |     
          |---photo-lightbox.html 本ページ即ち、写真を表示するページ(自分で用意)

          ※青字のファイルは、Lightbox2サイトからダウンロードしたdistフォルダ配下のファイルです。
           lightbox281フォルダ配下には、ダウンロードファイルのdistフォルダ内のcss,images,js各フォルダ内の
           ファイルを配置した。(lightbox281は任意の名前)
          ※ *1 ダウンロードしたjQueryファイル(lightbox-plus-jquery.js、lightbox-plus-jquery.min.js)の代わりに、
           GoogleやMicrosoftのCDN(Content Delivery Network)のjQueryファイルを読み込んで使用することも可能です。
           例;Google Ajax API CDN
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
準備
 
1. jQueryファイルおよびLightbox2のCSSファイルをインクルードするタグを、HEADタグ内に書きます。
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)

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

※jQueryをGoogle Ajax API CDNからロードしない場合は、lightbox.jsの代わりにlightbox-plus-jquery.jsまたは
 lightbox-plus-jquery.min.jsを使用する(下表参照)。

v2.8.1におけるjQuery,lightbox.css,lightbox.jsファイルの記述の組み合わせ(○:使用する)
項 目HEADタグ内に記述/BODYタグ直前に記述
Googleのjquery.min.jslightbox.csslightbox.jsまたは
lightbox.min.js
lightbox-plus-jquery.jsまたは
lightbox-plus-jquery.min.js
jQuery記述方法1
jQuery記述方法2
備 考※ jQuery記述方法1:Google Ajax API CDNからjQueryをロードできる環境にある場合 ※ jQuery記述方法2:Google Ajax API CDNからjQueryをロードできない環境にある場合
 
2. Lightbox2のJSファイルをインクルードするタグを、/BODYタグの直前に書きます。
 Lightbox2のJSファイルは、従来のファイルlightbox.jsの他に、新たにjQueryが含まれたファイルが提供されています。
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)
<script type="text/javascript" src="js/lightbox.min.js"></script> <!-- または lightbox.jsを使用 -->

※ソース修正が必要な場合は、ソースコードが読み易いlightbox.jsを使用する。
lightbox.min.jsは、改行なしで定義されているためソースコードが読み難いため、ソースの修正には向かない。
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script> <!-- または lightbox-plus-jquery.jsを使用 -->

※ソース修正が必要な場合は、jQuery記述方法1(jQueryをGoogle Ajax API CDNからjQueryをロードする)にします。
 
3. lightbox.cssで、参照するprev.gifnext.gifloading.gifおよびclose.gifのファイルのパスが正しいロケーションかをチェックします。 ロケーションは、lightbox.cssから見た相対または絶対パスを設定します。

  3  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);

 82   background: url(../images/loading.gif) no-repeat;

113  background: url(../images/prev.png) left 48% no-repeat;

131  background: url(../images/next.png) right 48% no-repeat;

195  background: url(../images/close.png) top right no-repeat;
 
設定
 
1. 表示したい画像のリンクタグ(Aタグ)に、data-lightbox="image-1"を追加し、lightboxを使用します。(1枚の画像)

<a href="../images/w640/P4280326.jpg" data-lightbox="lightbox" data-title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>
  • data-lightbox="image-1":画像ごとに、ユニークなIDを使用します。
  • href=:表示画像のURLを設定します。
  • data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。"data-title"の代わりに"title"も使用できます。
    その違いは、titleの場合、サムネール画像にマウスオーバーすると、キャプションが表示されますが、data-titleの場合は表示されません。
  • src=:表示画像のサムネール画像のURLを設定します。
  • width= / height=:サムネールの大きさを好みにより設定します。
 
2. もし、複数の画像を1グループとして表示したい場合は、それぞれの画像のリンクタグ(Aタグ)に、 data-lightbox="lightbox[グループID]"を追加し、  lightboxを使用します。(複数画像のグループ)

<a href="../images/w640/P2200022x1024.jpg" data-lightbox="lightbox[group1]">
                         <img src="../images/w640/P2200022x1024.jpg" width="150" height="112" alt="1" border=0></a>
<a href="../images/w640/P5100370.jpg" data-lightbox="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" data-lightbox="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" data-lightbox="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" data-lightbox="lightbox[group1]" title="width:640">
                         <img src="../images/w640/PB140339.jpg" width="150" height="112" alt="5" border=0></a>
  • data-lightbox="lightbox[group1]":グループIDは、グループ内で同じIDを設定します。
  • href=:表示画像のURLを設定します。
  • data-title=:拡大オーバーレイ画像のパネルに表示されるタイトル(キャプション)を設定します。
    "data-title"の代わりに"title"も使用できます。
  • src=:表示画像のサムネール画像のURLを設定します。
  • width= / height=:サムネールの大きさを好みにより設定します。
 
3. ページの例(まとめ
・jQuery記述方法1(Google Ajax API CDNからjQueryをロードできる環境にある場合)

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

<!--jQueryおよびCSSファイル -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.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>

<!--JSファイル -->
<script type="text/javascript" src="js/lightbox.min.js"></script> <!-- または lightbox.jsを使用 -->
<!--Lightbox2オプションのカスタマイズ(必要時) -->
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。
(注4)v2.8.1におけるjQuery,lightbox.css,lightbox.jsファイルの記述の組み合わせ(○:使用する)
項 目HEADタグ内に記述/BODYタグ直前に記述
Googleのjquery.min.jslightbox.csslightbox.jsまたは
lightbox.min.js
lightbox-plus-jquery.jsまたは
lightbox-plus-jquery.min.js
jQuery記述方法1
jQuery記述方法2
備 考※ Lightbox2オプションは、.jsファイルの後に記述する
※ jQuery記述方法1:Google Ajax API CDNからjQueryをロードできる環境にある場合
※ jQuery記述方法2:Google Ajax API CDNからjQueryをロードできない環境にある場合
・jQuery記述方法2(Google Ajax API CDNからjQueryをロードできない環境にある場合)

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

<!--CSSファイルのみ -->
<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>

<!--JSファイルは、jquery付を使用する -->
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script> <!-- または lightbox-plus-jquery.jsを使用 -->
<!--Lightbox2オプションのカスタマイズ(必要時) -->
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。日本語を扱う場合は、charsetをUTF-8とし、ソースコードもUTF-8とします。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)使用する画像の大きさは、PCの画面からはみ出ない大きさにします。

Lightboxのダウンロード
Lightbox2.8.1のカスタマイズ(応用編)修正例 (修正値は赤字) ≫カスタマイズのサンプルデモ

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

v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
1. Lightboxページの背景色を変更する(lightbox.css-.lightboxOverlay)(@)- navy:
7 .lightboxOverlay {
8   position: absolute;
9   top: 0;
10  left: 0;
11  z-index: 9999;
12  background-color: navy; /*デフォルト black*/
13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14  opacity: 0.8;
15  display: none;
16 }
2. Lightboxページの背景色の透明度を変更する(lightbox.css-.lightboxOverlay)(@)
7 .lightboxOverlay {
(途中省略)
12  background-color: navy; /*デフォルト black*/
13  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*デフォルト 80*/
14  opacity: 0.5; /*デフォルト 0.8*/
(途中省略)
16 }


※ 13 filter-opacity場合 0(完全に透明) 〜 100(完全に不透明)の範囲で指定する(初期値は100)
※ 14 opacityの場合 0.0(完全に透明)〜1.0(完全に不透明)の範囲で指定する(初期値は1)
3. Lightbox画像コンテナ枠の背景色(B)を変更する(別々の色に修正した)(lightbox.css- .lb-outerContainer)
 43 .lb-outerContainer {
 44  position: relative;
 45  background-color: yellow; /*画像コンテナ枠の色(B)デフォルト white*/
4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css-.lb-container)(C)
63 .lb-container {
64  padding: 10px; /*デフォルト 4px*/
65 }
5. CLOSEボタン画像を変更する(lightbox.css-.lb-data .lb-close)(H)
195 background: url(../images/close-red.png) top right no-repeat; /*デフォルト ../img/close.png*/
6.1 Lightboxコンテナ上のNEXT/PREVボタンの位置を下の方に変更する(lightbox.css-.lb-nav a.lb-prev / .lb-nav a.lb-next)(F,G)
109 .lb-nav a.lb-prev {
(途中省略)
113  background: url(../images/prev.png) left 95% no-repeat; /*デフォルト 48*/
(途中省略)
127 .lb-nav a.lb-next {
(途中省略)
131  background: url(../images/next.png) right 95% no-repeat; /*デフォルト 48*/

※値は、0から100。位置はほぼ中央が48%、それより小さい値の場合は上の方に、大きい値の場合は下の方に配置されます。

6.2 Lightboxコンテナ上のNEXT/PREVボタンを画像の外に表示する(lightbox.css-.lb-nav a.lb-prev / .lb-next:hover/.lb-prev/.lb-next)(F,G)
109 .lb-nav a.lb-prev {
110  width: 34%;
111  left: -50px; position: absolute; /*マイナス値を指定し、position: absolute;を追加する。デフォルト 0*/
112  float: left;
113  background: url(../images/prev.png) left 90% no-repeat;
114  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
115  opacity: 1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
127 .lb-nav a.lb-next {
128  width: 64%;
129  right: -50px; /*マイナス値を指定する。デフォルト 0*/
130  float: right;
131  background: url(../images/next.png) right 90% no-repeat;
132  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/
133  opacity:1; /*NEXT/PREVボタンを常に表示したい場合修正。デフォルト 0*/

※left rightの値はマイナス値で単位pxを付けます。例: -50px 。
※通常、NEXT/PREVボタンは、マウスオーバーした場合に表示されますが、NEXT/PREVボタンを画像の外に出した場合は、常に表示するのもよいでしょう。
※ 114 および 132 filter-opacity場合 0(完全に透明) 〜 100(完全に不透明)の範囲で指定する(初期値は100)
※ 115 および 133 opacityの場合 0.0(完全に透明)〜1.0(完全に不透明)の範囲で指定する(初期値は1)

7. Lightboxデータコンテナ上の画像キャプションと画像枚数の文字色を変更する(デフォルトは未定義)(lightbox.css-.lb-data .lb-caption / .lb-data .lb-number)(D)
176 .lb-data .lb-caption {
177  font-size: 13px;
178  font-weight: bold;
179  line-height: 1em;
  color: white; /*画像キャプション 1行追加 白色*/
180 }
181 182 .lb-data .lb-number {
183  display: block;
184  clear: left;
185  padding-bottom: 1em;
186  font-size: 11px;
187  color: yellow; /*何枚中何枚目表示(画像枚数) #999999*/
188 }
8. Lightbox2 オプションの変更修正(lightbox.js)
オプションデフォルト値説明
alwaysShowNavOnTouchDevicesfalseタッチパネルPCで、trueの場合、 ナビゲーション矢印アイコンを常に表示する(※2)。
fadeDuration 500ms拡大画像を表示するフェードイン、フェードアウトに要する時間(ミリ秒)
fitImagesInViewport true trueの場合、画像が大きい場合縮小して表示
maxWidth なし 画像の最大幅
maxHeight なし 画像の最大高さ
positionFromTop 50 トップからの画像までのピクセル数
resizeDuration 700ms 画像サイズが違う時の画像表示にかかる時間(ミリ秒)
showImageNumberLabel true trueの場合、画像番号と画像総数を表示する(例 image 1 of 6)
wrapAround false trueの場合、左と右のナビゲーション矢印を最初と最後の画像に来た時でも表示します。
最後(最初)の画像に来たとき最初(最後)の画像に移れる
albumLabel'Image %1 of %2'複数の写真をグループにして表示する場合、画面の左下に表示される何枚目表示。
例(デフォルト):Image 2 of 5 。設定例;値は、シングルクォーテーション'を付けて書きます(例:'photo %1 / %2')。
※1 オプションはLightbox2のJSファイルを記述した後に、
次のスクリプトを記述します。

<script>
    lightbox.option({
      'resizeDuration': 700,
      'wrapAround': true,
      'albumLabel': 'Photo %1 / %2',
    })
</script>
※2 オプション'alwaysShowNavOnTouchDevices'が true の場合の表示例
(タッチパネルPCの場合)


 
■ lightbox.css と lightbox.js のデフォルトのソースコード(Lightbox v2.8.1)(参考:修正前)
 
■ Lightbox v2.8.1 カスタマイズ後の画像(こちらのサンプルデモで確認できます)

サンプル使用方法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)

動画関連サイト内リンク


  最終更新日:2015.11.8 v2.8.1(初版)