文件 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:;" οnclick="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}" οnclick="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}-->
运行正常。搞定