关闭

ecshop 商品详情页商品放大镜功能

1781人阅读 评论(0) 收藏 举报
分类:
ecshop 商品详情页商品放大镜功能 - cuiruijunphp - 格式化。。。

 

 

作用:放大图片。

步骤如下:
第一步:加载js文件。
在goods.dwt文件head部分加载:
<script type="text/javascript" src="js/mzp-packed-me.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网站同样生效。但是有的网站经过二次开发,大小事经过修改的,需要调整下样式的。

转载自:http://bbs.ecshop.com/thread-1118806-1-1.html,经测试,功能是ok的

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:43823次
    • 积分:1136
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论