您现在的位置是：首页 > 教程 > ecshop商城教程ecshop商城教程

ecshop商品放大镜JS实现放大镜产品效果代码实例

乐萱2023-12-10 22:49:14ecshop商城教程已有6人查阅

导读适用所有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里面 添加一行： 
<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>
全选代码
复制

本文标签：

很赞哦！ (0)

上一篇：ecshop后台admin路径的修改方法

下一篇：ecshop用户等级不同显示不同等级商品价格的实现方法

暂无内容
暂无内容

相关文章

暂无内容
暂无内容

随机图文

留言与评论 （共有 0 条评论）
昵称：
匿名发表 登录账号
         
验证码：

大家在看

ecshop收货地址199/198号段提示手机号格式不正确！
    暂无内容

本栏推荐

    暂无内容

相关标签

大家喜欢

    暂无内容