サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
[Lightbox v2.05 旧版]
サンプル使用方法LightboxのダウンロードLightboxのカスタマイズ(応用編)
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は、「1枚の画像」または「複数画像のグループ」を表示する2つの方法があります。
だだし、スライドショー、大きな画像を画面に合わせて表示や画像を別ウィンドーに表示などができません。
これらを望むには、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. 1枚の画像


  2. 複数画像のグループ
    1 桜咲く2010年2月21日 2 バラ 3 雲 4 国立昭和公園の秋 5 夕焼け
使用方法
ダウンロード
 
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の3つの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.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/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>

<!--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サイトのTOPページからは、最新バージョンv2.8.1のみダウンロードできます。
旧版などすべてのバージョンのダウンロードは、こちらからできます。
Lightboxのカスタマイズ(応用編)  ≫カスタマイズのサンプル
Lightboxページの背景の色(デフォルト:白)を変えるなど、Lightboxのカスタマイズ方法を述べます。下はLightbox表示例。

@:ページの背景 A:画像コンテナの枠 B:データコンテナ C:CLOSEボタン D:NEXT/PREVボタン E:画像の枚数
 
  1. Lightboxページの背景色を変更する(lightbox.css)
    
    27 #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    
  2. Lightboxページの背景色の透明度を変更する(lightbox.js)
    
    52 overlayOpacity: 0.8,   // controls transparency of shadow overlay
    
    ※背景色の透明度は、1を設定すると完全な不透明になり、0を設定すると完全な透明になります。
     
  3. Lightbox画像コンテナ枠の色(A)及びデータコンテナの色(B)を変更する(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 は画像コンテナ枠(A)、下 imageDataContainer はデータコンテナ(B)です。
    画像コンテナ枠(A)は、表示画像の背景になります。
    imageDataContainer(B)には、「CLOSE X」画像、画像のタイトルや表示枚数が表示されます。
    通常は、2つは同じ色にします。

  4. Lightbox画像コンテナ枠の幅を変更する(lightbox.css/lightbox.js)
    ・lightbox.css (注.画像コンテナ枠の幅A)
    6 #imageContainer{ padding: 10px; }
    ・lightbox.js (注.データコンテナBの横幅を、上と合わせて修正します)
    57 borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
  5. ボタン系画像ファイル名を変更する(/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.gifnext.gifloading.gifclose.gif及びloading.gifを変更したい場合は、 /lightbox/imagesフォルダを差替えます。

  6. 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%が良いでしょう。

  7. Lightboxデータコンテナ上の画像枚数の表示方法をを変更する(lightbox.js)
    
    61 labelImage: "Image",
    62 labelOf: "of"
    
    修正例→
    
    61 labelImage: "わたしの写真集",
    62 labelOf: "/"
    
  8. 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)(参考)

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