我来说下 具体的操作步骤
【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 οnmοuseοver=”moveLeft()” οnmοusedοwn=”clickLeft()” οnmοuseup=”moveLeft()” οnmοuseοut=”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 οnmοuseοver=”moveRight()” οnmοusedοwn=”clickRight()” οnmοuseup=”moveRight()” οnmοuseοut=”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里面去 即可
到现在为止 放大镜就添加好了