1、下载jqzoom2.3 (http://download.csdn.net/download/sinat_37390744/9802308)
2、引入js和css文件
<link rel="stylesheet" href="themes/mydiy/css/jqzoom.css" type="text/css">
{insert_scripts files='jquery-1.6.js,jquery.jqzoom-core-pack.js'}
3、goods.dwt代码
<style>
ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
border:1px solid red;
}
ul#thumblist li a img{
width: 60px;
height: 60px;
}
.jqzoom{
text-decoration:none;
float:left;
}
</style>
{if $pictures}
<div class="clearfix">
<a href="{$goods.goods_img}" class="jqzoom" rel='gal1' title="{$goods.goods_name}" >
<img src="{$goods.goods_img}" title="{$goods.goods_name}" style="border: 4px solid #666;">
</a>
</div>
{/if}
<br/>
{include file="./library/goods_gallery.lbi" /}
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});
});
</script>
3、goods_gallery.lbi代码
<div class="clearfix" >
{if $pictures}
<ul id="thumblist" class="clearfix" >
{foreach from=$pictures item=pic}
<li><a title="{$pic.img_desc}" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '{$pic.thumb_url}',largeimage: '{$pic.img_url}'}"><img src='{$pic.thumb_url}'></a></li>
{/foreach}
</ul>
{/if}
</div>
4、上传商品相册图片
后台管理--商品管理--商品列表--编辑--商品相册--上传
5、字段说明
value里面的thumb_url表示缩略图(小图)
value里面的img_url表示缩略图(大图/原图)
value里面的img_desc表示图片的描述
6、注意
可能会出现jqzoom调用失败的现象。这是因为transport.js文件和jquery代码有冲突,解决方法见http://blog.csdn.net/sinat_37390744/article/details/68953524