您现在的位置是:首页 > 教程 > ecshop商城教程ecshop商城教程
ecshop商品放大镜JS实现放大镜产品效果代码实例
乐萱2023-12-10 22:49:14ecshop商城教程已有人查阅
导读适用所有ecshop版本模板的放大镜(含小图切换大图效果)前段时间分享了一个适用于所有ecshop版本的商品放大镜效果效果实现了 :
适用所有ecshop版本模板的放大镜(含小图切换大图效果)前段时间分享了一个适用于所有ecshop版本的商品放大镜效果效果实现了 :鼠标 放上去 右侧实现放大镜效果+鼠标点击实现弹出放大图片效果今天要分享的还是这个放大镜效果 只是增加了 小图切换显示大图效果兼容 ie6+ie7+ie8+ff我来说下 具体的操作步骤
【1】.先下载 mz-packed.js
【2】.在模板中引入 mz-packed.js 文件
有2种方式来引入
种方式:把mzp.packed.js 放到 ec根目录 js目录下面
这样 在goods.dwt文件里面 添加一行:
{insert_scripts files='common.js,mz-packed.js'}
第二种方式:把mz-packed.js放到 模板文件夹里面的js目录下
这样 在goods.dwt里面 添加一行:
【1】在goods.dwt里面修改如下: 我们以ecshop2.73 default模板为准 其他模板依此类推
198行:
【3】把刚才下载的包里面的MagicZoom.css 放到模板里面去即可
在goods.dwt里面引用:
【1】.先下载 mz-packed.js
【2】.在模板中引入 mz-packed.js 文件
有2种方式来引入
种方式:把mzp.packed.js 放到 ec根目录 js目录下面
这样 在goods.dwt文件里面 添加一行:
{insert_scripts files='common.js,mz-packed.js'}
第二种方式:把mz-packed.js放到 模板文件夹里面的js目录下
这样 在goods.dwt里面 添加一行:
<SCRIPT src="js/mz-packed.js" type=text/javascript></SCRIPT>
如果很多朋友发现没有效果 那检查下 是否成功的加载了js【1】在goods.dwt里面修改如下: 我们以ecshop2.73 default模板为准 其他模板依此类推
198行:
<!--商品图片和相册 start-->
<div class="imgInfo">
<!-- {if $pictures}-->
<a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;">
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
</a>
<!-- {else} -->
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
<!-- {/if}-->
改成:
<div id="show_pic" class="imgInfo" style="overflow: visible;">
<!--商品图片和相册 start-->
<!-- {if $pictures}-->
<A href="{$pictures.0.img_url}" id="goodsPic" class="MagicZoom" title="" rel="selectors-effect:false;zoom-fade:true;thumb-change:mouseover;">
<img style="border:0px;padding:0;border:1px #CCCCCC solid" id="img_url" src="{$goods.goods_img}" width="420" height="420" /></A>
<!-- {else} -->
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
<!-- {/if}-->
【2】找到 库文件 goods_gallery.lbi 把原来从命名为goods_gallery.lbi1 然后把压缩包goods_gallery.lbi 放进去【3】把刚才下载的包里面的MagicZoom.css 放到模板里面去即可
在goods.dwt里面引用:
<link href="MagicZoom.css" rel="stylesheet" type="text/css" />
<SCRIPT src="js/mz-packed.js" type=text/javascript></SCRIPT>
本文标签:
很赞哦! ()
相关文章
- ecshop商品列表页面和商品页面自定义url网址前缀的实现方法
- ecshop商品页显示商品收藏数量怎么修改
- ecshop商品批发多属性多规格多库存怎么批量购买
- ecshop水印ecshop商品添加水印的实现方法
- ecshop商品价格将属性价格改为直接价非加价修改的方法
- ecshop商品页商品详细描述内容调用商品相册图片代码的方法
- ecshop商品图片模糊修改图片上传压缩质量的方法
- ecshop商品相册显示顺序为正序的修改方法
- ecshop商品售完商品库存为0显示商品售完已售罄的实现方法
- ecshop商品详情页相关属性商品由新到旧排序的方法
- ecshop商品页商品浏览次数怎样修改按倍数增加
- ecshop商品页面定制属性附件上传文件上传图片
随机图文
-
怎么删除meta name="Generator" content="ECSHOP v2.7.2"
大家可能都发现了,商城源代码里面有下面这样的代码。这个代码很不安全,很多网络罪犯就是利用版本信息来寻找漏洞入侵网站,并且对网站进行破坏的。 -
ecshop商品购买数量增加加减按钮插件
ecshop商品页购买数量加减按钮ecshop购物车页加减按钮插件默认模版为例详细教程:找到flow.php里的如下代码 -
ecshop优惠活动优惠卷设置教程
首入ECShop 的后台管理中,从左边选择促销管理 -> 优惠活动然后点击右上角的添加优惠活动,在这里你需要填写优惠活动名称,优惠活动开始时间以及优惠活动结束时间。 -
ecshop限购限时日期购买插件开发教程
ECSHOP限购_限时促销购买,限时日期购买,商品促销一人限购一件问题的解决教程 ecshop做促销,如每人只限购1件控制ECSHOP的购买数量,在很多
留言与评论 (共有 条评论) |