简单详细步骤，EC可用的图片放大镜效果代码 - Magic Zoom

2016-07-07 16:05 来源：www.chinab4c.com 作者：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中载入。
（怎么载入？？：在good.dwt中 找到{insert_scripts files='common.js,global.js,transport.js} 改为{insert_scripts files='common.js,global.js,transport.js,mz-packed.js'}mz-packed.js' 要放在..\upload\js\文件夹下面）

3，找到goods.dwt中商品图片的位置，比如bluesky中是
  • <a href="{$pictures.0.img_url}" rel="lightbox[example]"><img src="{$goods.goods_img}" alt="" class="thumb"/></a>


把这句修改为
  • <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>

这样差不多就好了我上传个 无水印 js

---------------------------------------------
在样式表里面加
  • .MagicZoomPup {
  • width:50px!important;
  • height:50px!important;
  • }

这个是控制 图片中移动的小方框 的大小但是我加上这个之后 却出现了 不能移动 到最右边。。跟最下面也就是方框的右边缘不能移动到 图片的右边缘只能在 部分范围内移动请高手来解决这个问题

mz-packed.rar (4.79 KB)


回答：
在样式表里面加

.MagicZoomPup {
width:50px!important;
height:50px!important;
}

这个是控制 图片中移动的小方框 的大小但是我加上这个之后 却出现了 不能移动 到最右边。。跟最下面也就是方框的右边缘不能移动到 图片的右边缘只能在 部分范围内移动请高手来解决这个问题

希望高手 能指点一下这个地方

继 勇哥QingHou之后
我刚解决了 放大镜问题（我也是菜鸟）
很多人看了帖子还是不能顺利添加上
希望对菜鸟级 能有用
（引用了 以前的帖子加点说明）
1,下载楼主给的第一个zip包 http://www.magictoolb ...
sweekly 发表于 2009-5-12 14:49




把这句修改为

  • <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>

这个地方 是zoom-position: bottom也就是在图片下方显示 放大可以改为 right

.MagicZoomPup {
width:50px!important;
height:50px!important;
}

你把两个50改大一点，测试一下就知道了。

也可以把<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>
里面的="zoom-width: 400px400改小点。

忘记感谢你提供这么好的代码。

非常感谢分享这么好的代码！

多谢楼主啊！

我的也是只能放大图片的左上角部分，其它 的放大不了是怎么回事，请高手指教

謝謝哦，很不錯

好东西，收藏先。

样式表是什么东西？哪个文件哦？

不知道好用么，下班了，晚上回去试试，我的新站 酷呆网 个性礼品定制 www.kudiy.cc

我灯虎就放上去试试

照着做也怎么没效果，楼主QQ能告诉我，问问情况么，me是新新新手，

“MagicZoom.css，把这个内容复制到ecshop的style.css”

复制的程序放在开头或结尾？？

好好仅仅适用于BLUESKY 模版，