在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>

4、修改goods_gallery.lbi文件:
<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/

(0)

相关推荐