EC-CUBEの商品一覧でThickboxを使う
jQuery Thickboxとは、Ajaxの画像ギャラリーで、
・複数の画像をページ送りして表示する
・サムネイル（縮小画像）同一ページにかぶさるように大きな画像を表示する
・画像だけでなく、他のページも表示可能
などができて操作性にすぐれます。
これをEC-CUBEに組み込みます。
１． http://jquery.com/demo/thickbox/から
jquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードします。
２．解凍したファイルをアップロードします。 （ここでは/html/user_data/js/としました）
２．EC-CUBE管理画面のデザイン管理＞ページ詳細設定＞商品一覧ページをクリックします。
３．冒頭に次のコードを記述します。
<LINK rel=stylesheet type=text/css href="html/user_data/js/thickbox.css" media=all> <SCRIPT type=text/javascript src="html/user_data/js/jquery.js"></SCRIPT> <SCRIPT type=text/javascript src="html/user_data/js/thickbox.js"></SCRIPT>
４．中ほどの画像表示のコードを書き換えます。
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[cnt].main_image}-->" title="<!--{$arrProducts[cnt].name|escape}-->" class="thickbox" rel="main_image"><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[cnt].main_list_image}-->" title="<!--{$arrProducts[cnt].name|escape}-->" class="picture" /></a>
</div>
これだけで、商品詳細ーメイン画像を表示し、rel="main_image"により同一ページに表示されている商品の画像をページ送りされます。
