ecshop版本模板的放大镜,兼容ie6+ie7+ie8+ff

兼容 ie6+ie7+ie8+ff

我来说下 具体的操作步骤

【1】.先下载 mzp.packed.js

下载地址：http://www.magictoolbox.com/static/magiczoomplus-demo.zip

【2】.在模板中引入 mzp.packed.js 文件

有2种方式来引入

第一种方式：把mzp.packed.js  放到 ec根目录 js目录下面

这样 在goods.dwt文件里面 添加一行：

{insert_scripts files='common.js,mzp-packed.js'}
复制代码
第二种方式：把mzp.packed.js放到 模板文件夹里面的js目录下

这样 在goods.dwt里面 添加一行：

<script type="text/javascript" src="js/mzp.packed.js"></script>
复制代码
如果很多朋友发现没有效果 那检查下 是否成功的加载了js代码

【3】在goods.dwt里面 添加如下代码： 我们以ecshop2.70 default模板为准 其他模板依此类推

<!-- {if $pictures}-->
    <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;"/>
     </a>
         <!-- {else} -->
          <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;"/>
     </a>
         <!-- {/if}-->
 
【4】找到 库文件 goods_gallery.lbi
改为如下

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $pictures}-->
<div class="clearfix">
      <span onmouseover="moveLeft()" onmousedown="clickLeft()" onmouseup="moveLeft()" onmouseout="scrollStop()"></span>
      <div class="gallery">
        <div id="demo">
          <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>
          <div id="demo2" style="display:inline; overflow:visible;"></div>
        </div>
      </div>
      <span onmouseover="moveRight()" onmousedown="clickRight()" onmouseup="moveRight()" onmouseout="scrollStop()" class="spanR"></span>
      <script>
      function $(id){ 
        return (document.getElementById) ? document.getElementById(id): document.all[id]
      }
     
      var boxwidth=53;//跟图片的实际尺寸相符
     
      var box=$("demo");
      var obox=$("demo1");
      var dulbox=$("demo2");
      obox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      dulbox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      box.style.width=obox.getElementsByTagName("li").length*boxwidth*3+'px';
      var canroll = false;
      if (obox.getElementsByTagName("li").length >= 4) {
        canroll = true;
        dulbox.innerHTML=obox.innerHTML;
      }
      var step=5;temp=1;speed=50;
      var awidth=obox.offsetWidth;
      var mData=0;
      var isStop = 1;
      var dir = 1;
     
      function s(){
        if (!canroll) return;
        if (dir) {
      if((awidth+mData)>=0)
      {
      mData=mData-step;
      }
      else
      {
      mData=-step;
      }
      } else {
        if(mData>=0)
        {
        mData=-awidth;
        }
        else
        {
        mData+=step;
        }
      }
     
      obox.style.marginLeft=mData+"px";
     
      if (isStop) return;
     
      setTimeout(s,speed)
      }
     
     
      function moveLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
     
      function moveRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
     
      function scrollStop() {
        isStop=1;
      }
     
      function clickLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
     
      function clickRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      </script>
     </div>
    <!-- {/if}-->
【5】把刚才下载的包里面的magiczoomplus.css  内容添加到 style.css里面去 即可

到现在为止 放大镜就添加好了