―環境―――――――――――――
EC-CUBE 2.11.2
MySQL 5.1.34-log
PHP 5.2.17
――――――――――――――――

商品詳細ページでは、メイン画像が一枚あって、それを拡大し、サブ画像はサブの枠があり、そちらで拡大するようにできていますが、そのサブ画像をメインの枠でサムネイルとして置き、クリックして切り替え、同じように拡大したいと考えています。

この機能ですが、2.4.4では動いていたものの、2.11では機能しなくなりました。

以下がその内容です。

――――――――――――――――――――――――――――――――
<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+60}-->,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+60}-->,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+60}-->,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+60}-->,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 width="430px" 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 width="430px" src="'+ small.src+'" alt="<!--{$arrProduct.name|escape}-->" class="picture" />'+
'</a>';
$(".expansion").colorbox();
});
}
}
//]]>
</script>

<!--▼CONTENTS-->
<div class="detail_mainbox clearfix">

<div id="detailarea" class="clearfix">

<div id="detailphotobig" class="large">
<!--{assign var=key value="main_image"}-->
<!--{if $arrProduct.main_large_image != ""}-->
<!--★画像★-->
<a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" >
<img width="430px" src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
<!--★拡大する★-->
<!--{else}-->
<a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" >
<img src="<!--{$arrFile[$key].filepath}-->" style="max-width:260px;" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
<!--{/if}-->
</div>
<!--★入れ替えミニ画像★-->

<div class="detailphotomini clearfix">
<img src="<!--{$arrFile.main_image.filepath}-->" width="75" style="display:float;cursor:pointer;" onclick="exchangeLargeSmall(this);" class="main" />
<!--{if $arrFile.sub_image1 != ""}-->
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" width="75" style="display:float;cursor:pointer;" onclick="exchangeLargeSmall(this);" class="sub1" />
<!--{/if}-->
<!--{if $arrFile.sub_image2 != ""}-->
<img src="<!--{$arrFile.sub_image2.filepath}-->" style="display:float;cursor:pointer;" width="75" onclick="exchangeLargeSmall(this);" class="sub2" />
<!--{/if}-->
<!--{if $arrFile.sub_image3 != ""}-->
<img src="<!--{$arrFile.sub_image3.filepath}-->" style="display:float;cursor:pointer;" width="75" onclick="exchangeLargeSmall(this);" class="sub3" />
<!--{/if}-->
</div>
</div>

――――――――――――――――――――――――――――――――

これらを修正してやりたいことが3つあります。

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

2.拡大画像は一番大きいものを呼び出す。

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


この3つを可能にするには、どのように書き換えたらよいのでしょうか？
どなたか、ご教授いただきたく、よろしくお願いいたします。

まずはHTMLベースで書きなおして、それをSmartyにあてはめてみたらいかがでしょうか。

多分簡単にできると思いますよ。

----------------
EC CUORE 株式会社クオーレ
カスタマイズ御相談下さい。

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に関してはかなり無知なもので、あてはめるだけの技術が無い状態です。

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

自分なりに進歩があったのですが、最後の詰めが甘いようなので質問させてください。
以下の文でサムネイルとメイン画像の切り替えができるようになったのですが、そこからさらに各画像の拡大表示が上手くいきません。

それぞれに<a>をつければいいと思ったのですが、そう簡単にはいきませんでした。

ここから先の場合、どういった方法を使えばいいか、教えていただけないでしょうか？

――――――――――――――――――――――――――――――――
<script type="text/javascript">
$(function(){
$('#viewer div img').each(function(i){
$(this).attr('id','view' + (i + 1).toString());
$('#viewer div img:first').css({zIndex:'99'});
});

$('#viewer ul li').click(function(){
var connectCont = $("#viewer ul li").index(this);
var showCont = connectCont+1;

$('#viewer div img#view' + (showCont)).siblings().stop().animate({opacity:'0'},1000);
$('#viewer div img#view' + (showCont)).stop().animate({opacity:'1'},1000);

$(this).addClass('active');
$(this).siblings().removeClass('active');
});

$('#viewer ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:'0.5'},200);
});

$('#viewer ul li').css({opacity:'0.5'});
$('#viewer ul li:first').addClass('active');
});
</script>


<div id="view_container">
<div id="viewer">
<div>
<img width="430px" src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != ""}-->
<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key]|strlen >= 1}-->
<img width="430px" src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" >
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
</div>

<ul>
<li><a href="java script:void(0);"><img width="100px" src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.$key1|h}-->" class="picture" /></a></li>

<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key1 value="sub_title`$smarty.section.cnt.iteration`"}-->
<!--{assign var=key2 value="sub_image`$smarty.section.cnt.iteration`"}-->
<!--{if $arrProduct.$key2 != ''}-->
<li><a href="java script:void(0);"><img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.$key2|h|nl2br}-->&width=100&height=100" alt="<!--{$arrProduct.$key1|h}-->" class="picture" /></a></li>
<!--{/if}-->
<!--{/section}-->
</ul>
</div><!--/#viewer-->
</div><!--/#container-->

――――――――――――――――――――――――――――――――