每日签到设为首页收藏本站
切换到窄版

商会资讯

 找回密码
 立即注册

QQ登录

只需一步，快速开始

用新浪微博连接

一步搞定

搜索
热搜: 活动 交友 discuz
商会资讯 › brat › 日志

brat

http://www.smellage.com/?272367

ecshop产品展示图片放大镜效果（含大小图切换）完美去水印

已有 2712 次阅读2011-9-28 11:11 |个人分类:ecshop

       最近一直在用ecshop定制一套钻石、珠宝、裸钻的商城，客户需要产品展示有图片放大镜效果（并且含大小图切换功能），一开始找了个相似效果放上去，火狐没问题，ie就让我无语了，和transport.js发生冲突，重新调整代价太大。网上查阅了一下，关于ecshop产品展示图片放大镜效果都是用的一个来源于http://www.magictoolbox.com/magiczoomplus/的效果实现。 结果对于去水印方法，可都已失效，废话少说，记录下解决方法，希望能帮助到大家。

放大镜效果来源于：
http://www.magictoolbox.com/magiczoomplus/
具体方法
1.把下载来的 mzp-packed.js   放入/js目录下，也有方案是放在模板文件夹下，个人习惯，js归类，哈哈。同时，在goods.dwt页面加入js载入语句，这里用的是ecshop模板载入方法：
{insert_scripts files='common.js,mzp-packed.js'}

2.替换goods.dwt页面相关代码
找到代码  
  1. <!-- {if $pictures}-->
  2. <a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;">
  3. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>

  5. <!-- {else} -->
  6. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
  7. <!-- {/if}-->
复制代码
替换为
  1. <!-- {if $pictures}-->
  2. <a href="{$pictures.0.img_url}" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;" id="zoom1" class="magiczoom magicthumb" title="{$goods.goods_style_name}">
  3. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;" />

  5. <!-- {else} -->
  6. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
  7. <!-- {/if}-->
复制代码

这面这句是原有相册效果，不要的可以自己去掉
  1. onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;"
复制代码

3.替换goods_gallery.lbi页面相关代码
找到代码
  1. <!-- {foreach from=$pictures item=picture}-->
  3. <a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="b_blue" />

  5. <!--{/foreach}-->
复制代码
替换为
  1. <!-- {foreach from=$pictures item=picture}-->



  6. <a href="{$picture.img_url}" rel="zoom1" rev="{$picture.img_url}" title="{$picture.img_desc|escape:html}">
  7. <img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="b_blue" />


  10. <!--{/foreach}-->
复制代码

4.把刚才下载的包里面的magiczoomplus.css   内容添加到 style.css里面去
magiczoomplus.css文件内容如下：
  1. /***********************放大镜配置文件**************************************************************/

  3. /* css class for zoomed area 放大图像的边框样式*/
  4. .magiczoombigimagecont {border:1px solid #66c010;}
  5. /* header look and feel css class */
  6. /* header is shown if "title" attribute is present in the <a> tag 图像上方名称样式 */
  7. .magiczoomheader {font:12px arial;color:#fff;text-align:center !important;background: #66c010; padding:4px 0;}
  8. /* css class for small looking glass square under mouse 鼠标移到图像后出现的框样式*/
  9. .magiczoompup {border:1px solid #66c010;background: #e5f5c2;}
  10. /* css style for loading animation box */
  11. .magiczoomloading {text-align:center;background:#ffffff;color:#444;border:1px solid #ccc;opacity:0.8;padding:3px 3px 3px 3px !important;display:none; /* do not edit this line please */
  12. }
  13. /* css style for gif image in the loading animation box */
  14. .magiczoomloading img {padding-top: 3px !important;}
  15. /* css class for thumbnail link <a> */
  16. .magicthumb {cursor: url(zoomin.cur), pointer;outline: none;}
  17. /* css class for the thumbnail link <a> when the big image is zoomed */
  18. .magicthumb-zoomed { cursor: default; }
  19. /* css class for span inside the thumbnail <a> */
  20. .magicthumb span { display: none; }
  21. /* css class for the thumbnail image */
  22. .magicthumb img { border: 1px solid #808080; outline: none; }
  23. /* css class for the big image while zooming 点击图像后出现的大图样式*/
  24. .magicthumb-image { border: 1px solid #66c010; outline: none;}
  25. /* css class for the zoomed big image */
  26. .magicthumb-image-zoomed { cursor: url(zoomout.cur), pointer; }
  27. /* css class for the caption under the big zoomed image */
  28. .magicthumb-caption {color: #333333;background-color: #f0f0f0;border: 1px solid #cccccc;border-top: none;font-family: verdana, helvetica;font-size: 11px;padding: 8px 16px;}
  29. /* css class for the control bar */
  30. .magicthumb-controlbar {display: block;height: 18px;}
  31. .magicthumb-controlbar a {display: block;width: 18px;height: 18px;margin: 0px 1px;outline: none;float: left;overflow: hidden;}
  32. .magicthumb-controlbar a span {display: block;width: 1000px;height: 1000px;background: transparent url(controlbar.png) no-repeat 0 0;outline: none;position: absolute;left: 0px;top: 0px;}
  33. /* css class for the loading message box */
  34. .magicthumb-loading {border: 1px solid #000000;background: #ffffff url(loader.gif) no-repeat 2px 50%;padding: 2px 2px 2px 22px;margin: 0;text-decoration: none;text-align: left;font-size: 8pt;font-family: sans-serif;}
复制代码

5.完美去除水印
mzp-packed.js文件是经过编码的，所以看起来有点让人吐血。解决办法：
找到
  1. q 2f=[\'^8q|9d.9c.2o.}9j,7o|4.-9h,.f|9a,80~4!!7t 7s 7r!82~b{}!,8g.8e.^b{}2!84(-6:6<5\',\'#8n\',10,\'8q\',\'1a\',\'99%\',20];
复制代码

这句，删除即可。
收藏 分享邀请 转发到微博 举报

全部作者的其他最新日志

评论 (0 个评论)

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

回顶部