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

2016-07-07 16:47 来源：www.chinab4c.com 作者：ecshop专家

里面的效果实现了 ：鼠标 放上去 右侧实现放大镜效果 +鼠标点击实现弹出放大图片效果

今天要分享的还是这个放大镜效果 只是增加了 小图切换显示大图效果


兼容 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>
<ahref="{$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里面去 即可

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

回答：
mzp.packed.js
在哪里下载？

用了，怎么不行呢，不能小图切换大图

不错哦可以试试

版主好像将帖子 发错误了