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的

ecshop商品详细页图片放大镜(MagicZoom)

文件 mzp-packed.js  http://photo.poco.cn/best_pocoer/js/mzp-packed.js style.css   .MagicZoom...
  • wangmj518
  • wangmj518
  • 2014年01月15日 21:11
  • 1395

ecshop 放大镜效果

  • 2013年11月07日 00:04
  • 19KB
  • 下载

ECSHOP产品详情页修改商品购买数量并实时更新商品总价的实现与优化

当用户购买产品时,可能有时候不仅仅买一件商品,那么当客户购买多个当前产品时如果能同时显示总价,那么无疑将增加我们网站的亲和度!实现这个办法并不难,就是增加一个即时计算商品总价的js代码,这个网络有一篇...
  • mingbo9
  • mingbo9
  • 2017年04月05日 14:17
  • 663

Ecshop模板开发(十一):商品详情页显示和添加评价

在themes/yourthemes/library目录下面新建两个文件。分别为comments.lbi comments_list.lbi内容分别如下:(1)comments.lbi {insert...
  • sinat_37390744
  • sinat_37390744
  • 2017年04月07日 22:22
  • 399

Ecshop模板开发(十):商品详情页商品属性参数

1.html{foreach from=$properties key=key item=prop_list} {$key|escape} ...
  • sinat_37390744
  • sinat_37390744
  • 2017年04月03日 17:11
  • 573

ecshop 商品详情页面显示-赠品信息-优惠活动

在goods.php中搜索$goods = get_goods_info($goods_id);然后下下一行中,添加下面的代码 /* 取得用户等级 */     $user_rank_list = a...
  • fgdfgasd
  • fgdfgasd
  • 2015年02月01日 04:20
  • 1909

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

1、下载json2.js (http://download.csdn.net/detail/schenker/2220609) 2、将common.js文件的35行更改: 源代码: Ajax....
  • sinat_37390744
  • sinat_37390744
  • 2017年04月02日 23:32
  • 843

Ecshop模板开发(十四):商品详情页显示与添加标签

1、html{if $tags} 商品标签 #show the tags ...
  • sinat_37390744
  • sinat_37390744
  • 2017年04月09日 22:31
  • 288

ecshop商品详情里面调用商品相册里面的图片

/*****这里是控制显示图片多少张*****/
  • nuli888
  • nuli888
  • 2016年07月17日 12:35
  • 1407

ecshop商品详情页添加任意字段的方法

一、在数据库添加字段,会手写的就后台添加,不会就进入phpmyadmin默认的就行。     这是通用的写法 ALTER TABLE `ecs_goods` ADD `goods_sz` VAR...
  • qq19124152
  • qq19124152
  • 2012年11月25日 21:23
  • 2743
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ecshop 商品详情页商品放大镜功能
举报原因:
原因补充:

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