javascript Lightbox
JavaScriptライブラリ『Lightbox JS v2.0』を使用している
画像の拡大表示方法。
＜サンプル＞
http://www.huddletogether.com/projects/lightbox2/
下記がダウンロードされるデータ。
・css
・imgages
・js
・index.html
設置するｈｔｍｌフォルダ内に、css、images、jsファイルを設置。
実際に自分が設置したいhtmlのheadタグ内に下記を記述。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
初めに表示するサムネイルをimgタグで設置したあとにアンカータグを設置。
下記参照↓
<a href="img/sample01.jpg" rel="lightbox"><img src="img/sample01s.jpg" border="0" /></a>
sample01が拡大表示用画像。
sample01sがサムネイル画像（ファイル名は例です。）
ダウンロードしたimagesファイル内に画像データを置いても問題は無い。
上記では、lightbox用と自分で使いたい用に画像フォルダをimgに分けている。
複数の写真をグループ化すれば、NEXT PREVの表示が追加される。
下記サンプル。
<a href="img/sample01.jpg" rel="lightbox[グループ名]"><img src="img/sample01s.jpg" border="0" /></a>
<a href="img/sample02.jpg" rel="lightbox[グループ名"><img src="img/sample02s.jpg" border="0" /></a>
<a href="img/sample03.jpg" rel="lightbox[グループ名"><img src="img/sample03s.jpg" border="0" /></a>
以上で、画像の拡大表示が可能になります。