ECcubeで写真拡大でlightboxを設置

ECcube

http://www.naga-blog.com/m/body.php?&eid=1801


上記の記事を参考に設置してみました。
1.jQuery lightBox pluginをダウンロード
2.その中の、jquery.lightbox-0.5.jsとjquery.lightbox-0.5.cssをアップロード
3.site_frame.tplをいじって、上記のjsとcssを読み込むようにする。
4.site_frame.tplのhead部分に下記を入れる。

    <script type="text/javascript">
    $(function() {
        $('#photo_l a').lightBox();
    });
    </script>


5.detail.tplをいじる


まずメイン画像部分

<!--{if $arrProduct.main_large_image != ""}-->
<a href="<!--{$arrFile.main_large_image.filepath}-->">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
<!--{else}-->
<a href="<!--{$arrFile[$key].filepath}-->">
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
<!--{/if}-->


サブ画像部分

<!--{if $arrFile[$key].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->">
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" />
</a>
<!--{/if}-->


これで完成。
サブ画像のリンクをどうすればもってこれるのが一番迷った。これに1時間かかったしね。。。
ECcubeいみわからなさすぎ。