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

それぞれに<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-->

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