ecshop图片放大镜（MagicZoom）

文件 mzp-packed.js

/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.修改 themesdefaultgoods.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.修改 themesdefaultlibrarygoods_gallery.lbi

将

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

<li><a href=”gallery.php?id={$id}&amp;img={$picture.img_id}” target=”_blank”><img src=”{if%20$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%20$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