适用于ecshop2.7 所有模板的新放大镜效果共享

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



虽然不是什么厉害的效果但是确实很多人咨询其实这个效果我之前就共享过今天发布一个更详细的教程 让菜鸟都可以马上能使用新版的放大镜效果本工作室北京模板部落www.xwmoban.com会陆续分享一些模板制作技巧 和js心得

放大镜效果来源于:

http://www.magictoolbox.com/magiczoomplus/

放大镜在官方 ecshop2.7 default模板上的演示效果为:

http://ecshop.xwmoban.com/default/goods.php?id=1

(刚已经成功修复了兼容 ie6+ie7+ie8+ff3.0)效果:鼠标hover +鼠标click均有效果



这个放大镜效果 不仅可以鼠标放上去 放大图片 而且点击还可以弹出放大后的图片

具体方法只需要修改下goods.dwt文件 即可


把下载来的 mzp-packed.js放入 模板目录下面的js目录下

比如 themes/default(模板名称)/js/mzp-packed.js

在goods.dwt里面引入这个js文件
  1. <script type="text/javascript" src="js/mzp-packed.js"></script>
复制代码
然后在大约185行 加入
  1. <a href="{$pictures.0.img_url}" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
  2. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
  3. </a>
复制代码
不会改代码 没关系 直接下载下面的模板 就可以直接使用我已经加好了放大镜

官方带放大镜的 default模板 utf-8编码

default.rar (436.7 KB)

1111.jpg (19.78 KB)

1111.jpg


回答:
谢谢分享!我测试了一下!我鼠标放上去之后没有反应!点一下就有放大!

谢谢分享!我测试了一下!我鼠标放上去之后没有反应!点一下就有放大!
kxgow 发表于 2009-7-27 20:06



看我演示站的效果

http://ecshop.xwmoban.com/default/goods.php?id=1

鼠标放上去有放大镜效果点击 弹出放大镜放大的图片

我使用的是IE8,下面切图!

未命名.jpg (61.38 KB)

未命名.jpg



我使用的是IE8,下面切图!
kxgow 发表于 2009-7-27 20:08



我刚测试了 ie8正常

如果你的电脑用ie8打开我的站不正常你可以打开

http://www.magictoolbox.com/magiczoomplus/

看看这个效果是否正常如果这个效果不正常那应该是你电脑的设置问题了

期待其他朋友测试!

这个功能好,这就用上!~~ 谢谢了

拜月小刀
,刚才打开你给的网址可以看到以上两种效果http://www.magictoolbox.com/magiczoomplus/

未命名.jpg (65.96 KB)

未命名.jpg


最后测试你的测试地址,两种效果,只有鼠标点击放大。没有鼠标移动放大!

最后测试你的测试地址,两种效果,只有鼠标点击放大。没有鼠标移动放大!
kxgow 发表于 2009-7-27 20:29


我用IETest 测试 ie8下 我的演示站是正常的不过也有可能和实际的ie8有些差异晚点我换台vista的机器测试下



呵呵,本来我也想发这个的,没想到拜月老大先发了。
我研究了一下,还有其他几种放大镜的效果的噢。
演示如下:http://www.frstore.com.cn/goods.php?id=584

发觉拜月老大发的是magiczoomplus的,我用的还是旧版的magiczoom的,没有水印,哈~

FF也是一样,鼠标要点才放大


FF也是一样,鼠标要点才放大
dpd566n73 发表于 2009-7-27 20:39



小样

default css里面hidden了修复了下ff已经正常

这个放大镜效果 很不错
不过这个官方原版的有版权

支持一下!!!