设为首页收藏本站

UNIX技术社区

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
热搜: console
查看: 3361|回复: 3

适用所有ecshop版本模板的放大镜(含小图切换大图效果)

[复制链接]
发表于 2009-11-25 16:42:44 | 显示全部楼层 |阅读模式
这个放大镜效果 不仅可以鼠标放上去 放大图片 而且点击还可以弹出放大后的图片
放大镜效果来源于:

http://www.magictoolbox.com/magiczoomplus/

具体方法

1.把下载来的 mzp-packed.js   放入 模板目录下面的js目录下

比如 themes/default(模板名称)/js/mzp-packed.js

2.在goods.dwt里面引入这个js文件
<script type="text/javascript" src="js/mzp-packed.js"></script>

替换相关代码
<!-- {if $pictures}-->
    <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;"/>
     </a>
         <!-- {else} -->
          <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;"/>
     </a>
<!-- {/if}-->
3.库文件 goods_gallery.lbi
替换相关代码
             <!-- {foreach from=$pictures item=picture}-->
            <li>
           <a href="{$picture.img_url}" rel="zoom1" rev="{$picture.img_url}" title="{$picture.img_desc|escape:html}">
        <img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" /></a>
            </li>
            <!--{/foreach}-->
4.把刚才下载的包里面的magiczoomplus.css   内容添加到 style.css里面去
已修改好的默认模板代码下载
http://babytutu.ys168.com/
PS:“替换相关代码”就是……原来是啥代码就换成我写的……搜索就是了,再不明白我也没办法了,我写着自己看的……实在不懂的去官方论坛提问
 楼主| 发表于 2009-11-25 16:43:22 | 显示全部楼层
黄波-Bob 该用户已被删除
发表于 2012-10-17 10:00:28 | 显示全部楼层
mzp-packed.js  这个文件那里下?????
发表于 2012-10-20 10:02:02 | 显示全部楼层
http://www.magictoolbox.com/magiczoomplus/
dowload下来里面
magiczoomplus.js
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表