…ここからが続き

jQuery lightBox pluginの使い方

1. jQuery lightBox pluginダウンロード
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>

HTMLソース例

<div id="gallery">
<ul>
<li><a href="photos/image1.jpg" title="画像1のタイトルが入ります。"><img src="photos/thumb_image1.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image2.jpg" title="画像2のタイトルが入ります。"><img src="photos/thumb_image2.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image3.jpg" title="画像3のタイトルが入ります。"><img src="photos/thumb_image3.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image4.jpg" title="画像4のタイトルが入ります。"><img src="photos/thumb_image4.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image5.jpg" title="画像5のタイトルが入ります。"><img src="photos/thumb_image5.jpg" width="72" alt="" /></a></li>
</ul>
</div>

「id="gallery"」となっている部分と「('#gallery a').lightBox();」を同じ名前にすれば、どんな名前にしても大丈夫です。

追記：6/20 画像単体で呼び出し

$(function() {
  $('.gallery1 a').lightBox();
});
$(function() {
  $('.gallery2 a').lightBox();
});
$(function() {
  $('.gallery3 a').lightBox();
});
$(function() {
  $('.gallery4 a').lightBox();
});
$(function() {
  $('.gallery5 a').lightBox();
});

XHTHML

呼び出したい画像を個別に class="gallery1" class="gallery2" ...　とつけていくしかないと思います。