您现在的位置是:首页 > cms教程 > Ecshop商城教程Ecshop商城教程
ecshop商品放大镜JS实现放大镜产品效果代码实例
乐萱2023-12-10Ecshop商城教程已有人查阅
导读适用所有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商品分类目录标题自定义title
首先修改后台模板文件:/admin/templates/category_info.htm 在这个tr下面再加一个tr,内容如下:数据表ecs_category增加cat_title字段:
ecshop商城首页增加一个商品浏览排行榜的实现方法
ecshop商城首页增加一个商品浏览排行榜浏览排行榜,并且可以在商城后台的“模板设置”里进行控制。由于ECSHOP商城默认是没有读取浏览排行的,所以这部分功能既得修改程序
ecshop后台帐号密码忘记的解决方法
方法1:把下面的代码保存为文件 mima.php。方法2:把下面的代码保存为文件 mima.php方法3:进入phpMyAdmin里面修改
ecshop配送方式保价费用怎么删除
ecshop在购物流程中,会看到配送方式里面有是否保价的选项,如何去掉呢。然后同时不影响不同快递配送费用打开flow.dwt文件,搜索shippingTable 找到下面的代码,删除 大概884行
相关源码
-
(自适应响应式)个人作品技术文章博客网站模板下载基于PbootCMS内核开发的响应式博客模板,为数字营销、技术分享类内容打造。采用前沿设计理念,兼顾内容展示与阅读体验,适配各类终端设备。通过本模板可快速构建专业级行业博客,有效传播专业知识与案例成果。查看源码 -
WordPress个人博客主题 - wp-Concise-v1.0免费下载wp-Concise-v1.0是一款专为个人博客设计的简约风格主题,采用全宽排版设计理念,注重内容呈现效果。该模板适用于个人随笔、技术分享、生活记录等博客场景,帮助用户打造专业的内容展示空间。查看源码 -
(自适应)工业机械设备产品介绍免费pbootcms源码下载本网站模板基于PbootCMS内核精心开发,为机械设备与工业产品制造企业量身打造。设计充分考量行业特性,突出产品展示与技术实力呈现查看源码 -
帝国cms7.5淘宝客电商品牌特价带手机站带会员模板下载为电商品牌特价展示设计的帝国CMS模板,集成PC端与移动端双平台适配。采用瀑布流商品布局,支持品牌分类聚合展示,突出特价促销视觉冲击力。查看源码 -
(自适应)宽屏大气的净水器智能电子设备网站pbootcms源码下载本模板基于PbootCMS内核开发,为净水器设备、智能电子设备企业量身打造,采用响应式设计技术,可快速构建专业级企业官网。通过本模板可高效展示产品技术参数、解决方案及企业服务优势。查看源码 -
自适应建材瓷砖卫浴大理石类pbootcms网站模板源码下载为建材瓷砖、卫浴瓷砖企业打造的高端响应式门户模板,基于PbootCMS内核深度开发。采用前沿HTML5自适应架构,无缝兼容手机端触控交互与PC端展示场景。查看源码
| 分享笔记 (共有 篇笔记) |
