现在的位置: 首页 > ecshop > 知也无涯 > 正文

ecshop图片放大镜(MagicZoom)

2013年12月19日 ecshop, 知也无涯 ⁄ 共 3239字 ⁄ 字号 暂无评论

文件 mzp-packed.js

http://blog.jack361.com/wp-content/uploads/2013/12/mzp-packed.js

style.css

 

.MagicZoomBigImageCont {border:1px solid #66C010;}

.MagicZoomHeader {font:12px Arial;color:#fff;text-align:center !important;background: #66C010; padding:4px 0;}

.MagicZoomPup {border:1px solid #66C010;background: #E5F5C2;}

.MagicZoomLoading {text-align:center;background:#ffffff;color:#444;border:1px solid #ccc;opacity:0.8;padding:3px 3px 3px 3px !important;display:none;}

.MagicZoomLoading img {padding-top: 3px !important;}

.MagicThumb {cursor: url(zoomin.cur), pointer;outline: none;}

.MagicThumb-zoomed { cursor: default; }

.MagicThumb span { display: none; }

.MagicThumb img { border: 1px solid #808080; outline: none; }

.MagicThumb-image { border: 1px solid #66C010; outline: none;}

.MagicThumb-image-zoomed { cursor: url(zoomout.cur), pointer; }

.MagicThumb-caption {color: #333333;background-color: #F0F0F0;border: 1px solid #CCCCCC;border-top: none;font-family: Verdana, Helvetica;font-size: 11px;padding: 8px 16px;}

.MagicThumb-controlbar {display: block;height: 18px;}

.MagicThumb-controlbar a {display: block;width: 18px;height: 18px;margin: 0px 1px;outline: none;float: left;overflow: hidden;}

.MagicThumb-controlbar a span {display: block;width: 1000px;height: 1000px;background: transparent url(controlbar.png) no-repeat 0 0;outline: none;position: absolute;left: 0px;top: 0px;}

.MagicThumb-loading {border: 1px solid #000000;background: #ffffff url(loader.gif) no-repeat 2px 50%;padding: 2px 2px 2px 22px;margin: 0;text-decoration: none;text-align: left;font-size: 8pt;font-family: sans-serif;}

 

css加在/themes/default 的style.css底部

mzp-packed.js放在根目录的 js文件夹

 

1.修改 \themes\default\goods.dwt

将:

<!-- {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}-->

更改为:

<script type="text/javascript" src="/js/mzp-packed.js"></script>

<!-- {if $pictures}-->

<a href="{$goods.original_img}"  id="zoom1" title="{$goods.goods_style_name}" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;" rel="zoom-width:310px; zoom-height:310px;disable-expand: true">

<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width=310 />

</a>

<!-- {else} -->

<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width=310/>

<!-- {/if}-->

 

1.1 这里要说明的是 $goods.original_img 为图片原图地址,如果改为$picture.0.img_url 拿的是相册的第一张图。但有时会出现商品图不是相册的第一张图,导致放大镜的大图对应不上。

如果用 改为$goods.goods_img ,由于拿的是中图。很可能造成图片不够尺寸放大。所以最好是用 $goods.original_img。

1.2 class="MagicZoom MagicThumb"  这里如果不想点击后会弹出大图,弹出图片预览的话可以将MagicThumb 删除掉。这个问题 查了好久,才知道可以这样设置。

2.修改 \themes\default\library\goods_gallery.lbi

<!-- {foreach from=$pictures item=picture}-->

<li><a href="gallery.php?id={$id}&amp;img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" /></a>

</li>

<!--{/foreach}-->

 

改为:

<!-- {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}" /></a>

</li>

 

<!--{/foreach}-->

 

运行正常。搞定  

 

原帖地址

http://hi.baidu.com/yilong4586/item/3a1a697c2053dd235c1789d3

博客主机

博客主机

给我留言

您必须 [ 登录 ] 才能发表留言!

×