Lightbox v2.51 with print-button～サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示させる＜Ajax

ダウンロード

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.gifとnext.gifファイルのパスが正しいロケーションかをチェックします。
また、lightbox.jsで、参照するloading.gifとclose.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>

<!--１つの画像の例-->
<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の画面からはみ出ない大きさにします。

No	ビューアー	JSフレームワーク	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	PrototypeからjQueryに変更（v2.51)	●				●
2	Pirobox	jQuery	●				●	推奨
3	Videobox	mootools			●
4	Mediabox	mootools		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	●	●	●	●	●*2	推奨

サンプル