帖子標題：[教學] 商品放大鏡【分享】 的, ecshop, 配置文件, 是

viphf2014

作用：放大图片。

构成：
大概分成4部分。有了下面这四部分，你就可以放大你的图片。

<a href="xxx" >
      <img src="xxx2" /></a>
以上两个是第1部分和第二部分。
第三部分，是js插件。
第四部分,是Magiczoom的CSS配置文件。

解释第一二部分，一个a链接，加中间的图片。
a链接 href里面的xxx放的是大图的地址。img里面的xxx2放的是小图的地址。

其它废话略过。。

下面在ecshop默认系统加Magiczoom.

第一步：加载js文件。
在goods.dwt文件head部分加载：
<script type="text/javascript" src="js/mzp-packed.js"></script>

第二步：修改goods.dwt模板。
查找imginfo部分。
将原有图片显示内容替换成如下：
<!--商品图片和相册 start-->
     <div class="imgInfo">
<!--放大镜-->
     <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom" title="{$goods.goods_style_name}"  rel="selectors-effect:false;zoom-fade:true;thumb-change:mouseover;  zoom-width:350px; zoom-height:300px;"  >
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" width="230px;" height="230px" style="border:1px #CCCCCC solid"/></a>
<!--放大镜-->
<div class="blank5"></div>

第三步：加载Magiczoom CSS配置内容：
将以下内容添加到style.css中：
/*********************放大镜配置文件**************************************/

/* Copyright 2008 MagicToolBox.com. To use this code on your own site, visit http://magictoolbox.com */

/* CSS class for zoomed area */
.MagicZoomBigImageCont {
    border:            1px solid red;
   
}

/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
    font:            12px Tahoma, Verdana, Arial, sans-serif;
    color:            #fff;
    background:        orange;
    text-align:     center !important;
}


/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
    border:         1px solid orange;
    background:     #ffffff;
    cursor:            hand;
}

/* CSS style for loading animation box */
.MagicZoomLoading {
    text-align:        center;
    background:     #ffffff;
    color:            #444;
    border:         1px solid #ccc;
    opacity:        0.8;
    padding:        3px 3px 3px 3px !important;
    display:         none; /* do not edit this line please */
}

/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
    padding-top:    3px !important;
}
/* ©2008 MagicToolbox.com. To use this code on your own site, visit http://www.magictoolbox.com */

/* CSS class for thumbnail link <A> */
.MagicThumb {
    cursor: url(images/zoomin.cur), pointer;
    outline: none;
}

/* CSS class for the thumbnail link <A> when the big image is zoomed mo ban tang ban quan suo you */
.MagicThumb-zoomed { cursor: default; }

/* CSS class for span inside the thumbnail <A> */
.MagicThumb span { display: none; }

/* CSS class for the thumbnail image */
.MagicThumb img { border: 1px solid #808080; outline: none; }

/* CSS class for the big image while zooming */
.MagicThumb-image { border: 1px solid #cccccc; outline: none; }

/* CSS class for the zoomed big image */
.MagicThumb-image-zoomed { cursor: url(images/zoomout.cur), pointer; }

/* CSS class for the caption under the big zoomed image */
.MagicThumb-caption {
    color: #333333;
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 11px;
    padding: 8px 16px;
}

/* CSS class for the control bar  */
.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(images/controlbar.png) no-repeat 0 0;
    outline: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

/* CSS class for the loading message box */
.MagicThumb-loading {
    border: 1px solid #000000;
    background: #ffffff url(images/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;
}
/*****************************************************/
PS：以上CSS内容部分无效，只有几条有效：有用的在里面就行了。

第四步：修改相册库文件---goods_gallery.lbi
<div id="demo1" style="float:left">
            <ul>
            <!--放大镜-->
               <!-- {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}-->
            <!--放大镜-->

            </ul>
   </div>

OK!以上四步就成功将放大镜添加到ecshop默认系统中去。
放到别的任何ecshop网站同样生效。