サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
Lightboxの使い方[Lightbox v2.7.1 - 2014/3/30 バージョン]
サンプル使用方法LightboxのダウンロードLightbox v2.7.1のカスタマイズ+ソーシャルボタン設置(応用編)
Lightbox v2.05Lightbox v2.51 2012.4.20版 |Lightbox v2.7.1 2014.3.30版|Lightbox v2.8.1 2015.07.09 版
Lightbox2は、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。
Lightbox2(v2.7.1)は、JSフレームワークに、jQueryフレームワークを使用しています(旧版はPrototypeフレームワーク)。
画像の表示は、「1枚の画像」または「複数画像のグループ」の2つの表示方法があります。
だだし、スライドショー、大きな画像を画面に合わせて表示や画像を別ウィンドーに表示などができません。
これらを望むには、Piroboxを薦めます。また、Lightbox 2 WordPress Plugin 日本語版については、このサイトを参照。

サンプル

  1. 1枚の画像


  2. 複数画像のグループ
    1 桜咲く2010年2月21日 2 バラ 3 雲 4 国立昭和公園の秋 5 夕焼け
使用方法
ダウンロード
 
1. ダウンロードしたLightbox2(v2.7.1)を解凍し、下のように配置します。
   【Lightbox v2.7.1 設置例(本ページ)】 []:フォルダ


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

          ※青字のファイルは、Lightbox2サイトからダウンロードしたファイル
          ※(注1)ダウンロードファイルの解凍結果のフォルダ名はimg。ここではimagesに変更した。
           このため、lightbox.cssファイル内の画像close.pngなどのフォルダ名を変更した。
 
準備
 
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.min.js"></script> <!-- または lightbox.jsを使用 -->

※ソース修正が必要な場合は、ソースコードが読み易いlightbox.jsを使用する。
lightbox.min.jsは、改行なしで定義されているためソースコードが読み難いため、ソースの修正には向かない。
 
2. Lightbox2のCSSファイルをインクルードするタグを、HEADタグ内に書きます。CSSファイルのパスは、置いた場所により適宜変更します。

<link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />
 
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. ページの例(まとめ)

<!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.11.0.min.js"></script>
<script type="text/javascript" src="./js/lightbox.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>

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

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

v2.51 拡大表示例
※写真表示例のサンプル写真のサイズは640X480   ※#lightboxOverlayと#lightboxの画面は同じ大きさです。従い白色の囲い枠は実際にはありません。
1. Lightboxページの背景色を変更する(lightbox.css-.lightboxOverlay)(@)- pink: iron green
7 .lightboxOverlay {
8   position: absolute;
9   top: 0;
10  left: 0;
11  z-index: 9999;
12  background-color: pink; /*デフォルト 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; /*マイナス値を指定する。デフォルト 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.js)(D)
26 LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
27  return "★公園の風景2014 - " + curImageNum + " / " + albumSize; /* Imageを★公園の風景2014 - に変更*/
28 }; /* of を / に変更(何枚中何枚目の表示例 7of15→7/15)*/
8. 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 }


 
■ lightbox.css と lightbox.js のデフォルトのソースコード(Lightbox v2.7.1)(参考:修正前)
 
■ Lightbox v2.7.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)

動画関連サイト内リンク


  最終更新日:2014.8.30 v2.7.1