在ecshop中实现商品详细页面的放大镜功能
1、下载mzp-packed.js文件
2、在修改goods.dwt中引用该js文件:
{insert_scripts files='mzp-packed.js'}
3、修改goods.dwt的部分代码:
<!--商品图片和相册 start-->
<div id="show_pic" class="imgInfo" style="overflow: visible;">
<!--商品图片和相册 start-->
<!-- {if $pictures}-->
<a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom" title="{$goods.goods_style_name}" rel="selectors-effect:false;zoom-fade:true;thumb-change:mouseover; zoom-width:350px; zoom-height:300px;" >
<img style="border:1px;padding:0;border:1px #CCCCCC solid" id="img_url" src="{$goods.goods_img}" width="230" height="230" /></A>
<!-- {else} -->
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
<!-- {/if}-->
<div class="blank5"></div>
<div id="demo1" style="float:left">
<ul>
<!--放大镜-->
<!-- {foreach from=$pictures item=picture}-->
<li>
<a href="{$picture.img_url}" rel="zoom1" rev="{$picture.img_url}" title="{$picture.img_desc|escape:html}">
<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" /></a>
</li>
<!--{/foreach}-->
<!--放大镜-->
</ul>
</div>
5、将如下css文件内容添加到style.css中
文章转载:http://www.gehut.cn/