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

原创 2013年12月04日 14:29:39
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的

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ecshop第三方登陆之微信登录

ecshop现成的第三方登陆是没有微信登录,最近添加了微信登录(示例:http://www.doute365.com/DTYHZX),注意:这个微信登录不像原来那种可以在后台设置key和AppSecr...

ECSHOP商品详情页调用同一分类下产品

1.includes\lib_goods.php,添加function samecat_goods/** * 获得同分类下的商品 * * @access public * @param integer...

ecshop商品详情页图片放大与切换

  • 2013年05月07日 17:00
  • 23KB
  • 下载

Ecshop模板开发(五):商品详情页购物车和立即购买的实现

1、下载json2.js (http://download.csdn.net/detail/schenker/2220609) 2、将common.js文件的35行更改: 源代码: Ajax....

Ecshop模板开发(五):商品详情页图片相册jqzoom放大

1、下载jqzoom2.3 () 2、引入js和css文件 {insert_scripts files='jquery-1.6.js,jquery.jqzoom-core-pack.js'}...

Ecshop 2.7.1 B2B2C 小京东 商城网站 商品详情页二维码显示出错

ecshop开发中商品详情页二维码显示问题

ECSHOP 商品详情页 购物车页 添加购买数量加减按

找到模板文件中的good.dwt,查找类似 的数量文件输入控件(有的模板可能整合到了类似goods_info.lib库文件中)。将这一整段修改为 span class="good...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ecshop 商品详情页商品放大镜功能
举报原因:
原因补充:

(最多只允许输入30个字)