ECShop H5微商城
ECShop APP商城
ECshop4.0商业授权
ECShop源码全能套餐
ECMall全能套餐(含主机)
ECMall3.0功能定制
ECShop商城小程序
ECShop二开定制
ECShop授权套餐
ECShop装修市场
ECMall基础套餐(PC+H5)
ECMall3.0商业授权
返回列表 发帖

[共享] 简单,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 编辑 ]

mz-packed.rar (4.29 KB)

无水印JS

2

评分人数

  • lihaiyu

  • QingHou

ECShop下载                             ECShop4.0商业授权

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

TOP

顶,怎么安装啊!

TOP

怎么安装啊? 问下啊
ECShop下载                             ECShop4.0商业授权

TOP

顶,共享一下安装方法

TOP

安装方法很简单
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. }
复制代码
浮动框高宽自己改上面大小。
ECShop下载                             ECShop4.0商业授权

TOP

提示: 作者被禁止或删除 内容自动屏蔽
签名被屏蔽
ECShop下载                             ECShop4.0商业授权

TOP

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

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


呵呵,    正是,正是,,,

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

未命名-2.jpg
2008-6-24 10:16


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

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

TOP

安装方法在6楼,,由QingHou 提供的,
ECShop下载                             ECShop4.0商业授权

TOP

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


都大家帮忙

TOP

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

TOP

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



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

TOP

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

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


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

TOP

ASP可以用的,,

TOP

提示: 该帖被管理员或版主屏蔽
ECShop下载                             ECShop4.0商业授权

TOP

返回列表