ecshop商品详细页图片放大镜（MagicZoom）

文件 mzp-packed.js

http://photo.poco.cn/best_pocoer/js/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" class="MagicZoom MagicThum" 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}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" /></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}" class="B_blue" /></a>

</li>

<!--{/foreach}-->

运行正常。搞定