ECCUORE　様

お返事ありがとうございます。

アドバイス通りにHTMLでやってみたのですが、解決できたところとまるでわからないところに分かれました。


修正希望案
1.切り替え時のメイン画像に登録画像の一番大きいもの[500×500]を呼び出し、それを少しだけ縮めて表示する。

2.拡大画像は1と同じく一番大きい画像を利用する。

3.サムネイル画像は一番小さいもの[130×130]を呼び出し表示する。


以上の3点の、3のみはメイン画像以外は登録画像が2種類しかないので、メイン画像のみ一番小さい画像を引っ張って完了させました。



そして1と2でいまだにつまづいています。

――――――――――――――――――――――――――――――――
<script type="text/javascript">//<![CDATA[
exchangeLargeSmall.params = {
main: {name:"main",src:"<!--{$arrFile.main_image.filepath}-->",width:<!--{$arrFile.main_image.width}-->,height:<!--{$arrFile.main_image.height}-->
,large:"main_large_image",largewidth:<!--{$arrFile.main_large_image.width+80}-->,largeheight:<!--{$arrFile.main_large_image.height+80}-->
}

<!--{if $arrFile.sub_image1.filepath != ''}-->,
sub1:{name:"sub1",src:"<!--{$arrFile.sub_image1.filepath}-->",width:<!--{$arrFile.sub_image1.width}-->,height:<!--{$arrFile.sub_image1.height}-->
,large:"sub_large_image1",largewidth:<!--{$arrFile.sub_large_image1.width+80}-->,largeheight:<!--{$arrFile.sub_large_image1.height+80}-->
}<!--{/if}-->

<!--{if $arrFile.sub_image2.filepath != ''}-->,
sub2:{name:"sub2",src:"<!--{$arrFile.sub_image2.filepath}-->",width:<!--{$arrFile.sub_image2.width}-->,height:<!--{$arrFile.sub_image2.height}-->
,large:"sub_large_image2",largewidth:<!--{$arrFile.sub_large_image2.width+80}-->,largeheight:<!--{$arrFile.sub_large_image2.height+80}-->
}<!--{/if}-->

<!--{if $arrFile.sub_image3.filepath != ''}-->,
sub3:{name:"sub3",src:"<!--{$arrFile.sub_image3.filepath}-->",width:<!--{$arrFile.sub_image3.width}-->,height:<!--{$arrFile.sub_image3.height}-->
,large:"sub_large_image3",largewidth:<!--{$arrFile.sub_large_image3.width+80}-->,largeheight:<!--{$arrFile.sub_large_image3.height+80}-->
}<!--{/if}-->

};


function exchangeLargeSmall(obj)
{
smallObj = obj;
largeObj = document.getElementById('detailphotobig');
small = exchangeLargeSmall.params[smallObj.className];


if (small.large==undefined) {
largeObj.innerHTML =
'<img src="' + small.src + '" alt="<!--{$arrProduct.name|escape}-->" class="picture" />';
}
else {
$(document).ready( function() {
largeObj.innerHTML = '<a class="expansion" href="<!--{$smarty.const.ROOT_URLPATH}-->products/detail/<!--{$arrProduct.product_id}-->&image=' + small.large +'">' +
'<img src="'+ small.src+'" alt="<!--{$arrProduct.name|escape}-->" class="picture" />'+
'</a>';
$(".expansion").colorbox();
});
}
}
//]]>
</script>
――――――――――――――――――――――――――――――――

以上のようになっているのですが、まず大きい画像を呼び出せずにいます。

なにより

<!--{if $arrFile.sub_image1.filepath != ''}-->,
sub1:{name:"sub1",src:"<!--{$arrFile.sub_image1.filepath}-->",width:<!--{$arrFile.sub_image1.width}-->,height:<!--{$arrFile.sub_image1.height}-->
,large:"sub_large_image1",largewidth:<!--{$arrFile.sub_large_image1.width+80}-->,largeheight:<!--{$arrFile.sub_large_image1.height+80}-->
}<!--{/if}-->

上記の部分を理解できてないからだと思うのですが、HTMLでいじってもどうにもうまくいきません。
Smartyに関してはかなり無知なもので、あてはめるだけの技術が無い状態です。

なにからなにまで質問攻めとなってしまい申しわけないのですが、良い方法を教えて頂けないでしょうか？