当方初心者です。
ご教授下さい。
宜しくお願いします。

横並びのサブ画像をクリックしたときサブ拡大画像を表示させたい。

※商品登録ページのサブ画像、サブ拡大画像をMAX8枚登録できるように拡張しています


-------------------------------------------------



商品メイン画像[754×503]



-------------------------------------------------
|サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜


■現状の実装
商品メイン画像[754×503]の下に表示されている
横一列の商品のサブ画像[130×130]の(1)〜(8)をオンマウスした際
商品メイン画像[754×503]の解像度でサブ画像[130×130]が動的に表示される。

■今やりたいこと
商品メイン画像[754×503]の下に表示されている
商品のサブ画像[130×130]の(1)〜(8)をオンマウスした際
商品メイン画像[754×503]のサイズでサブ拡大画像[754×503]を動的に表示させたい



下記は現状のソースになります。

<div class="photo">
<!--{assign var=key value="main_image"}-->
<!--★画像★-->
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<a
href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->"
class="expansion"
target="_blank"
>
<!--{/if}-->
<div class="main_img">
<img src="<!--{$arrFile[$key].filepath|h}-->" width="754" height="503" alt="<!--{$arrProduct.name|h}-->" class="picture" /></div>
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
</a>
<!--{/if}-->
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
{
//change_thumb
$(function(){
$('.thumb_img a').click(function(){
var h = $(this).eq(0).attr('rel');
$('.main_img img').fadeOut(function(){
($('.main_img img').attr("src",h)).fadeIn();
});
return false;
})
});

});
</script>

EC-CUBEのverは2.12.2になります。

何卒宜しくお願い致します