jquery lightbox　ライトボックス

Javascript

LightBoxのJQuery版です。
LightboxはAjaxを利用して画像を表示するライブラリです。


使用例：
http://leandrovieira.com/projects/jquery/lightbox/　→EXAMPLEのタブをクリック



LightBox2はPrototypeで動いているのでjQueryを使用するとjavascriptがバッティングしてしまいます。
jQueryを使用するときのLightBoxはこの方法で使用しています。




1. jQuery lightBox pluginダウンロード

ダウンロード先リンク
http://leandrovieira.com/projects/jquery/lightbox/

2. 解凍したファイルにある「js」「css」「images」フォルダをアプロード。

3. headタグ内に下記ソースを記述

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>  
<script type="text/javascript">  
$(function() {  
  $('#gallery a').lightBox();  
});  
</script>  

4.HTMLのbody内に記述する例
<div id="gallery">

<ul>

<li><a href="photos/image1.jpg" title="画像１"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="photos/image2.jpg" title="画像2"><img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="photos/image3.jpg" title="画像3"><img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="photos/image4.jpg" title="画像4"><img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="photos/image5.jpg" title="画像5"><img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /></a></li>
</ul>

</div>


※注意

１、DLしたデータの中のimagesファイルをDLした時と違う階層に配置する場合はjquery.lightbox-0.5.jsの中のスクリプトを変更しないとCLOSE、NEXTなとの文字（GIF画像）が出てこなくなります。jquery.lightbox-0.5.jsを開いてcloseという単語とかで検索かけてGIF画像の住所が書かれてるスクリプトの場所を見つけ出し、住所の再設定が必要です。）

２、画像と画像の間にaタグを使用するとlightboxの次の画像や前の画像に進むといった機能ができなくなることがあります。
これは何故かというとlightboxのJavascriptで

<script type="text/javascript">

$(function() {

$('#gallery a').lightBox();

});

</script>

と、div galleryの中の aで定義してるからです。
上記のスクリプトのままでは<div id="gallery" の aを基準に画像を認識させて前後の画像をNEXTボタンなどで行き来しています。

ところが画像と画像の間（最初の画像、次の画像、その次の画像…）に経例えばリンクを使用したいので<a href="#">などを配置してみます。
lightboxの画像の前後機能が使えなくなります。NEXTボタンを押しても先に進みません。
このように、<li><a href="photos/image1.jpg〜で配置したlightboxの画像と画像の間に a を使用すると次の画像が進まなくなったり戻らなくなったりする現象が起こります。

この解決方法は以下の通りです。
lightboxの画像配置はaタグを用いるのですが、a要素だけで配置するわけではなく、一般に<li>などのブロックレベル要素を用いて配置するのでこれを有効活用します。

すなわち、$('#gallery a').lightBox();

ではなく、$('#gallery li a').lightBox();

と定義します。（もちろん li 以外でも可能です）
これでlightbox画像配置内に a　を使用してもバッティングしませんので画像のプレビューがきちんと次に進んだり前の画像に戻ったりします。