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

[共享] 简单详细步骤,EC可用的图片放大镜效果代码 - Magic Zoom

本帖最后由 sweekly 于 2009-5-12 14:50 编辑

继 勇哥  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)

1

评分人数

  • 晓天

ECShop下载                             ECShop4.0商业授权

在样式表里面加

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

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

希望高手 能指点一下  这个地方
ECShop下载                             ECShop4.0商业授权

TOP

继 勇哥  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

TOP

.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: 400px   400改小点。

TOP

忘记感谢你提供这么好的代码。
ECShop下载                             ECShop4.0商业授权

TOP

非常感谢分享这么好的代码!
ECShop下载                             ECShop4.0商业授权

TOP

多谢楼主啊!
ECShop下载                             ECShop4.0商业授权

TOP

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

TOP

謝謝哦,很不錯

TOP

好东西,收藏先。
ECShop下载                             ECShop4.0商业授权

TOP

样式表是什么东西?哪个文件哦?
ECShop下载                             ECShop4.0商业授权

TOP

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

TOP

我灯虎就放上去试试

TOP

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

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

复制的程序放在开头或结尾??
ECShop下载                             ECShop4.0商业授权

TOP

好好仅仅适用于BLUESKY 模版,

TOP

返回列表