追求卓越,资源共享

ECSHOP防凡客放大镜效果

安装方法很简单
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. }
复制代码

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

好用,是好用,但是,小框是随着大图的大小而变化的,大图越大,小框越小,反之,小框越大,如果大图的尺寸不一致,小框的大小也不一致,给人感觉很不爽;
解决此问题,可以试试两种变相的方法,
1、保证上传的产品的大图的尺寸是一致的,比如全部是800X600的,此方法,很简单,就是上传产品图片时,检查仔细点;:)
2、屏蔽这个框显示,只显示手的状态;
    此方法就是,在MagicZoom.css内注释两行代码,
    如下:
   .MagicZoomPup {
        /*border: #ccc 1px solid;
        background: #ffffff;*/
        cursor:pointer;
        }

{keywords:ECSHOP防凡客放大镜效果}是本站 (追求卓越,资源共享) 中一篇关于keywords:ECSHOP防凡客放大镜效果最经典的文章,欢迎您阅读和评论,您可以从百度搜索ECSHOP防凡客放大镜效果其它信息,也可以从google中查询更多ECSHOP防凡客放大镜效果的相关信息。
标签:ECSHOP防凡客放大镜效果
分类:技术交流| 发布:laibu| 查看: | 发表时间:2010-8-4
原创文章如转载,请注明:转载自黑暗天堂 http://www.918x.cn/
本文链接:http://www.918x.cn/post/2000.html

相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。