ecshop安装 Cloud Zoom放大镜

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家



在这我再把关于jquery的兼容性先说一下 。

大家只需 下载 解压后 替换到我们ecshop的js目录下transport.js，这个js我们已经做了修改 把jquery 和过去的transport.js进行了整合。

我们知道 jquery和ec最大的冲突是俩个地方 一个是 加入购物车 二是详细页商品的提交留言 这时候我们打开 js 下的common.js

找到 function addToCart 这个函数

  1. Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS**tring(), addToCartResp**e, 'POST', 'JSON');
复制代码
这是我们过去的写法 我们现在换成
  1. Ajax.call('flow.php?step=add_to_cart', 'goods=' + obj2str(goods), addToCartResp**e, 'POST', 'JSON');
复制代码
我说的很明白了 有些网友还要加qq 问个不停。

好 下来我们说如何加这个 放大镜目前网店已经用了 放大镜 但 Cloud Zoom 个人觉的更酷一些http://www.professorcloud.com/mainsite/cloud-zoom.htm

下载放到我们模板夹下 进行调入 例如
  1. <link href="themes/xaphp/style/cloud-zoom.css" type="text/css" rel="stylesheet" />
  2. <SCRIPT type=text/javascript src="themes/xaphp/js/cloud-zoom.1.0.2.min.js"></SCRIPT>
复制代码


第一个工作做完后 我们做下一个工作

  1. <a id=zoom1 class=cloud-zoom href="{$goods.original_img}" rel="showTitle:true, tintOpacity:0.5, smoothMove:5, zoomWidth:380, adjustX:12">

  3. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
  4. </a>
复制代码


大家对照不要复制错

我把 相册goods_gallery 也贴出来大家对照

  1. <!-- {foreach from=$pictures item=picture}-->
  2. <li><a class='cloud-zoom-gallery' href='{$picture.img_url}' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '{$picture.img_url}' ">
  3. <img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" /></a></li>
  4. <!--{/foreach}-->
复制代码

回答：
支持老师给力啊

我也支持下，哈哈

真是太好了讲的这么仔细

感谢分享！！！

一点效果也没有啊齐老师是不是忘记代码了

只第一张有放大效果。 小图不能滑动 也么有放大。

支持了呢 呵呵

transport.js这个文件一定要调入 因为这个是jq




基本上可以使用了有些细节上还弄不好。放在图片上的那个框 怎么设置大小。

不知道怎么调放大倍数总感觉放大倍数小

放大图 和被放大比例越大越好 。




不明白这个。 在哪里可以设置

齐老师的效果不错