|
这个放大镜效果 不仅可以鼠标放上去 放大图片 而且点击还可以弹出放大后的图片
放大镜效果来源于:
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:“替换相关代码”就是……原来是啥代码就换成我写的……搜索就是了,再不明白我也没办法了,我写着自己看的……实在不懂的去官方论坛提问 |
|