jQuery LightBox PluginはLiteBoxをjQueryで動かせるプラグインで、
jQueryをよく使う方にはいいと思います。

サンプル

jQuery lightBox pluginのダウンロード

まず
http://leandrovieira.com/projects/jquery/lightbox/
こちらのサイトから
jQuery lightBox plugin(zipファイル)をダウンロードします。

ダウンロードしたzipファイルの中の
「js」「css」「images」フォルダを
アップロードすればOK

jQuery lightBox pluginの使い方

使い方は
headタグ内に

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<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" 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>
    </ul>
</div>

と記述すればOK

※「id=”gallery”」の部分と「(‘#gallery a’).lightBox();」の部分は同じ名前ならなんでもOK。「class」でも指定できます。

jQuery lightBox pluginの設定

細かく設定を変えたい場合は
jquery.lightbox-0.5.js内の

settings = jQuery.extend({
	// Configuration related to overlay
	overlayBgColor: '#000',// 背景色
	overlayOpacity:	0.8,//透明度
	// Configuration related to images
	imageLoading:	'images/lightbox-ico-loading.gif',// ローディング画像
	imageBtnPrev:	'images/lightbox-btn-prev.gif',	// 「前へ」画像
	imageBtnNext:	'images/lightbox-btn-next.gif',	//「次へ」画像
	imageBtnClose:	'images/lightbox-btn-close.gif',//「閉じる」画像
	imageBlank:'images/lightbox-blank.gif',	//??画像
	containerBorderSize:	10,	// LightBox本体の外枠の大きさ
	containerResizeSpeed:	400,//リサイズ時のスピード。指定はミリ秒で設定。
	// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
	txtImage:'Image',	//左下に表示されるテキスト部分
	txtOf:	'of',// 左下に表示されるテキスト部分
	// Configuration related to keyboard navigation
	keyToClose:'c',// 「閉じる」のキーボードのキー割り当て
	keyToPrev:'p',//「前へ」のキーボードのキー割り当て
	keyToNext:'n',// 「次へ」のキーボードのキー割り当て
	imageArray:[],
	activeImage:	0
},settings);

部分をいじればOK

追記:クリッカブルマップでjQuery lightBox pluginを使う

サンプル
クリッカブルマップを使用するときも
jQuery lightBox pluginを使って使用できたのでその方法をメモ
クリッカブルマップを使用するときの変更点は以下の2箇所です。

  1. 「(‘#gallery a’).lightBox();」の部分を
    <script type="text/javascript">
       $(function() {
           $('area.gallery').lightBox();
       });
    </script>
    

    に変更。
    $(‘area.gallery’).lightBox();の部分はクラスでもidでもどっちでもOK。
    areaとid名(クラス名)の間にはスペースを空けない。

  2. 適用させたい部分のソースは
    <ul>
       <li><img src="photos/thumb_image1.jpg" alt="" width="72" height="72" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="17,14,62,59" href="photos/image1.jpg" alt="画像1タイトル" title="画像1タイトル" class="gal1" />
    </map></li>
       <li><img src="photos/thumb_image2.jpg" alt="" width="72" height="72" usemap="#Map2" />
    <map name="Map2" id="Map2"><area shape="circle" coords="37,38,18" href="photos/image2.jpg" alt="画像2タイトル" title="画像2タイトル" class="gal1" />
    </map></li>
    </ul>
    

    こんな感じです。
    ※areaのtitle=には画像のタイトルを記述