[共享] 简单，EC可用的图片放大镜效果代码 - Magic Zoom

阿阿勇

演示见
已无水印


这个代码是“拜月小刀 ”告之在下的，，http://bbs.ecshop.com/thread-56058-1-3.html
我随后下载试用了一下，还比较好用的，使用简单，图片大小比例是自动的，包括小图上的白方框

但这代码似乎是要收费的，，下载来的使用时，图片上有文字水印，，好像他的JS里有加密了，
刚才我还在发贴求助，希望有人帮忙把水印去掉，突然想到官方演示是没水印的，
主直接下载了官方的JS文件，
一替换，果然没水印了，哈哈

代码使用方式，下载来，看一下里面的演示就明白了，简单

代码下载：http://www.magictoolbox.com/static/magiczoomtrial.zip
官方无水印JS http://www.magictoolbox.com/static/mz-packed.js
官方演示 http://www.magictoolbox.com/magiczoom/



希望有人能找出小图上的白框的比例哪里调的，现在看起来略显大，不好看



另外问一下，商品的最大张那图的地址标签是什么，，我好像写错了



安装方法在6楼，，由QingHou 提供的，

[ 本帖最后由 阿阿勇 于 2008-9-3 14:26 编辑 ]

fengqingfang

楼主既然发出共享的代码和下载地址了   可否将使用方法告知我们诸位！

liangyaya

顶，怎么安装啊！

tsheitao

怎么安装啊? 问下啊

ecshop菜鸟

顶，共享一下安装方法

QingHou

安装方法很简单
1,下载楼主给的第一个zip包 http://www.magictoolbox.com/static/magiczoomtrial.zip 解开，里面有个MagicZoom.css，把这个内容复制到ecshop的style.css。

2，下载楼主给的无水印js http://www.magictoolbox.com/static/mz-packed.js 在goods.dwt中载入。

3，找到goods.dwt中商品图片的位置，比如bluesky中是

1. <a href="{$pictures.0.img_url}" rel="lightbox[example]"><img src="{$goods.goods_img}" alt="" class="thumb"  /></a>

复制代码

把这句修改为

1. <a href="{$pictures.0.img_url}" title="{$goods.goods_name|escape:html}" class="MagicZoom" rel="zoom-width: 400px; zoom-position: bottom"><img src="{$goods.goods_img}"/></a>

复制代码

应该就可以了，没测试。


在样式表里面加

1. .MagicZoomPup {
   
2.     width:50px!important;
   
3.     height:50px!important;
   
4. }

复制代码

浮动框高宽自己改上面大小。

阿阿勇

原帖由 QingHou 于 2008-6-24 09:42 发表
安装方法很简单
1,下载楼主给的第一个zip包 http://www.magictoolbox.com/static/magiczoomtrial.zip 解开，里面有个MagicZoom.css，把这个内容复制到ecshop的style.css。

2，下载楼主给的无水印js http:// ...

呵呵，    正是，正是，，，

不过那小方框还有点问题，，
就是改过了，小方框外观变了，但他显示区域没有变小，这样就跟大图显示的区域不对应了
而且小方框也移不到图片的最右下角

2008-6-24 10:16

小方框相对原尺寸，是向左上角缩放的，
有没有办法变成对原尺寸居中缩放，，这样显示区域就对应了

[ 本帖最后由 阿阿勇 于 2008-6-24 10:20 编辑 ]

阿阿勇

安装方法在6楼，，由QingHou 提供的，

阿阿勇

原帖由 fareign 于 2008-6-24 10:10 发表
勇哥好厉害呀。喜欢勇哥

都大家帮忙

麦维创想

虽然可以使用 但是还是有些问题 如果能直接用jquery那是最好的  我也一直在研究解决jquery和ec的冲突的问题 这样就更简单了  这个Magic Zoom因为是收费 所以免费的 有些小问题 不过基本上是可以使用了！！！发现“阿勇勇”同学真的很聪明 呵呵 支持下

阿阿勇

原帖由 拜月小刀 于 2008-6-24 11:12 发表
虽然可以使用 但是还是有些问题 如果能直接用jquery那是最好的  我也一直在研究解决jquery和ec的冲突的问题 这样就更简单了  这个Magic Zoom因为是收费 所以免费的 有些小问题 不过基本上是可以使用了！！！发现 ...

哇哈哈，，，多亏了你告诉我，，

欧主流折扣店

原帖由 QingHou 于 2008-6-24 09:42 发表
安装方法很简单
1,下载楼主给的第一个zip包 http://www.magictoolbox.com/static/magiczoomtrial.zip 解开，里面有个MagicZoom.css，把这个内容复制到ecshop的style.css。

2，下载楼主给的无水印js http:// ...

ASP的程序能用吗?   不明白,请赐教

阿阿勇

ASP可以用的，，