サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
Lightbox v2.51 with print button の使い方[Lightbox v2.51 印刷ボタン付加バージョンバージョン]

サンプル使用方法LightboxのダウンロードLightbox v2.51正規バージョン

Lightbox2は、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。
Lightbox v2.51 with print buttonは、正規版Lightbox v2.51に印刷ボタンを付加したバージョンです。
このバージョンは、印刷ボタンで拡大画像を印刷できます。

サンプル

  1. 1枚の画像


  2. 複数画像のグループ(このデモはnextボタンとprevボタンを表示画像の外に表示しています)
    上野公園1 上野公園2 上野公園3 上野公園4 上野公園5
使用方法
ダウンロード
 
1. ダウンロードしたLightbox v2.51 with print-buttonを解凍し、下のように配置します。
   【Lightbox  v2.51 with print-button 設置例(本ページ)】 []:フォルダ


   |---[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
          |     |---print.png
          |     |---その他画像ファイル 本ページで使用(自分で用意)
          |
          |---[js]
          |     |---jquery-1.7.2.min.js
          |     |---lightbox.js
          |     
          |     
          |---photo-lightbox-print.html 本ページ(自分で用意)

          ※青字のファイルは、ダウンロードしたファイル
          ※[js]フォルダのjquery-1.7.2.min.jsファイルは、ajax.googleapis.comからインクルード可
 
準備
 
1. Lightbox v2.51のjQuery フレームワークとJSファイルをインクルードするタグを、HEADタグ内に書きます。

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
(上または、<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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系メディアビューア(まとめ)
NoビューアーJSフレームワーク画像動画*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フレームを選択可 ●*2推奨
※動画とは、SWF、FLV、MOV、WMV(*1)
※Shadowboxのスライドショーは、画像、動画などなんでも可能(*2)
動画関連サイト内リンク


  最終更新日:2013.2.17 v2.51 with print button