FaceboxをlightBoxに変えるだけ

まず、jQuery lightBox pluginをダウンロードしましょう
jQuery lightBox pluginダウンロード

解凍後、フォルダ名をjquery-lightboxに変更し、いつものように/html/js/へとアップロードします。

あとは以下の2ファイルにコードを書きたして、完了です。
data/Smarty/templates/default/products/detail.tpl
data/Smarty/templates/default/products/list.tpl

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/js/jquery.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />

$(document).ready(function() {
	$('a.expansion').lightBox({
		fixedNavigation:true,
		overlayBgColor:'#000',
		overlayOpacity:0.7,
		imageLoading:'../js/jquery-lightbox/images/lightbox-ico-loading.gif',
		imageBtnClose:'../js/jquery-lightbox/images/lightbox-btn-close.gif',
		imageBtnPrev:'../js/jquery-lightbox/images/lightbox-btn-prev.gif',
		imageBtnNext:'../js/jquery-lightbox/images/lightbox-btn-next.gif',
		containerResizeSpeed:350,
		txtImage:'画像：',
		txtOf:'／'
	});
});

以下の部分はFaceboxのコードなので、邪魔であれば消して下さい。

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.css" media="screen" />

$(document).ready(function() {
    $('a.expansion').facebox({
        loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',
        closeImage   : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'
    });
});

これで、拡大画像内のボタンで画像の行き来ができるので、画像数が多くてもストレスになりません。
カタログサイトを作る場合は、このような道具を使うのがよいかと思います。

以上でした。