产品详细页多图滚动控制效果的实现

用于收藏精华贴子、网友共享的资料等。可以回复,不能发新贴。

版主: Jack

版面规则
本版面不能发新贴,可以回复

产品详细页多图滚动控制效果的实现

帖子lxq73061 » 2009-06-28 22:08

效果图:

一、相关文件列表
1. \includes\modules\additional_images.php 得到多图图片数据,并保存在数组中
2. \includes\templates\ezppt\common\tpl_columnar_display.php 将多图图片数组格式化(HTML封装)
3. \includes\templates\ezppt\tamplates\tpl_modules_main_product_image.php 输出多图和图片区域
4. \includes\templates\ezppt\tamplates\tpl_product_info_display.php 在指定产品详细页面位置调用显示多图

以上文件被包含顺序(4-3-2-1)
主要功能:产品详细页使用可以用鼠标点击控制的方式显示多图。

主要代码:文件3:
代码: 全选
<script language="javascript">
var $ = function (id){return document.getElementById(id);}

function changeImg(source){
   var o = $("smallpic_show");
   o.src = source.src;
   o.parentNode.setAttribute("href",source.getAttribute("lowsrc"));
   imgo=false;
}
</script>

<style>
.smallpic {
   display:block;
   border:ddd solid;
   float:left
}
</style>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE));?>
<div id="productMainImage" class="centeredContent back">
<div id="tm_imglist">
<div style="display:none;"> <?php echo zen_image($products_image_medium, addslashes($products_name), '', '',' id="biglpic_hidden" ','large');?> </div>
<a href="#" class="highslide" id="get_pic_big" onclick="return hs.expand(this, {captionId: 'caption1'})">
 <?php echo zen_image($products_image_medium, addslashes($products_name), 300, 300,' id="smallpic_show" class="smallpic" ');?>
 </a>
 </div><br style="clear:both" />
  <?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank"><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
<script type="text/javascript">
document.getElementById("get_pic_big").href=document.getElementById("biglpic_hidden").src;
</script>
<?php

 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));
 //if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {
  ?>
<style>
#itemThumbnailScroller {
  float: left;
  height: 80px;
  width: 270px;
  margin: 0px 2px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
 
}
#itemThumbnailScrollerSlider {
  width: 1000000px;
  position: absolute;
  left:0;
}
#itemThumbnailScrollerPrevious,
#itemThumbnailScrollerNext {
  float: left;
  height: 71px;
  width: 13px;
  background: url(/images/item_detail_sprite.png);
}
#itemThumbnailScrollerPrevious {
  background-position: 0px -352px;
}
#itemThumbnailScrollerNext {
  background-position: -26px -352px;
}

.product_imgs{
height:75px;
}
.product_img a {
width:60px;
height:65px;margin-right:2px;
}
.product_img a img{
width:100%;
height:65px;
}
</style> 
<div id="productAdditionalImages" class="product_imgs">
<img title="" src="/images/spacer.gif" id="itemThumbnailScrollerPrevious" alt="" style="background-position: 0px -352px;"/>
 <div id="itemThumbnailScroller">
 <div id="itemThumbnailScrollerSlider">
<div class="product_img"><a href="javascript:void(0);"><?php echo zen_image($products_image_medium, addslashes($products_name), 300, 300,' onclick="changeImg(this)" lowsrc="'.HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES.$products_image.'" ');?></a></div>
<?php
//$list_box_contents
//('/includes/templates/ezppt/common/tpl_columnar_display.php')
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?>
  </div>
  </div>
  <img title="" src="/images/spacer.gif" id="itemThumbnailScrollerNext" alt="" style="background-position: -39px -352px; cursor: pointer;"/>
</div>
<script>
var itemThumbnailCount  = $('itemThumbnailScrollerSlider').getElementsByTagName('a').length;
 var itemThumbnailWidth = 68;
 var itemThumbnailVisible = 4; //可见图片
 var Count = itemThumbnailCount-itemThumbnailVisible;//右侧可用图片数
 var Count2 = 0;//左侧可用图片数
 
if(Count <= 0 ){
    $("itemThumbnailScrollerNext").style.backgroundPosition = "-26px -352px";
    $("itemThumbnailScrollerNext").style.cursor = "";
}
function $(id){
   return document.getElementById(id);
}
$("itemThumbnailScrollerPrevious").onclick = function(){

   
     itemThumbnailScrollPrevious();
   
};   
   
$("itemThumbnailScrollerNext").onclick = function(){
   itemThumbnailScrollNext();

}
//上一轮
function itemThumbnailScrollPrevious(){
   if(Count2 > 0){
      var l = parseInt($("itemThumbnailScrollerSlider").style.left) | 0;
      $("itemThumbnailScrollerSlider").style.left = l + (itemThumbnailVisible*itemThumbnailWidth)  + "px";
      
      Count = Count + itemThumbnailVisible;
      Count2 = Count2- itemThumbnailVisible;
      if(Count2 <= 0){      
             $("itemThumbnailScrollerNext").style.backgroundPosition = "-39px -352px";
                $("itemThumbnailScrollerNext").style.cursor = "pointer";
            
            $("itemThumbnailScrollerPrevious").style.backgroundPosition = "-0px -352px";
                $("itemThumbnailScrollerPrevious").style.cursor = "";
      }   
   }

}   
//下一轮
function itemThumbnailScrollNext(){
   if(Count > 0){
      var l = parseInt($("itemThumbnailScrollerSlider").style.left) | 0;
      $("itemThumbnailScrollerSlider").style.left = l - (itemThumbnailVisible*itemThumbnailWidth)  + "px";
      Count = Count - itemThumbnailVisible;
      Count2 = Count2 + itemThumbnailVisible;
      if(Count <= 0){      
             $("itemThumbnailScrollerNext").style.backgroundPosition = "-26px -352px";
                $("itemThumbnailScrollerNext").style.cursor = "";
            
            $("itemThumbnailScrollerPrevious").style.backgroundPosition = "-13px -352px";
                $("itemThumbnailScrollerPrevious").style.cursor = "pointer";
      }
   }

}   
   
</script>         
<?php
//  }
?>
</div>
附件
.rar
程序文件
(11.32 KiB) 被下载 1427 次
外贸建站,模板开发,联系:lxq73061@qq.com www.520sz.com
lxq73061
普通会员
普通会员
 
帖子: 44
注册: 2009-06-06 22:06
QQ 帐号: 583964941

Re: 产品详细页多图滚动控制效果的实现

帖子kli3ds » 2009-06-29 8:39

:D

多谢分享。呵呵
深受客户好评,商品数据(转移-合并-采集),模板制作,程序修改.支付宝担保交易.
联系QQ:429553052
kli3ds
VIP会员
VIP会员
 
帖子: 596
注册: 2008-06-12 20:28
地址: 商品采集-模板制作-程序修改-支付宝担保交易
QQ 帐号: 429553052

Re: 产品详细页多图滚动控制效果的实现

帖子lxq73061 » 2009-07-02 18:06

回头我贴个演示地址来.
外贸建站,模板开发,联系:lxq73061@qq.com www.520sz.com
lxq73061
普通会员
普通会员
 
帖子: 44
注册: 2009-06-06 22:06
QQ 帐号: 583964941

Re: 产品详细页多图滚动控制效果的实现

帖子lxq73061 » 2009-07-02 20:44

最后由 daimadaquan 编辑于 2010-05-05 12:21,总共编辑了 1 次
原因: 经帖主站内信要求
外贸建站,模板开发,联系:lxq73061@qq.com www.520sz.com
lxq73061
普通会员
普通会员
 
帖子: 44
注册: 2009-06-06 22:06
QQ 帐号: 583964941

Re: 产品详细页多图滚动控制效果的实现

帖子xueshimengjie » 2009-07-04 4:23

我试过了,好象不行哦 :oops:
我就下载了你的附件,然后上传到目录,覆盖之前的,但是不行

有没有详细的步骤呢?

好象少了JS 和 CSS
xueshimengjie
新手上路
新手上路
 
帖子: 6
注册: 2009-05-19 0:42

Re: 产品详细页多图滚动控制效果的实现

帖子lxq73061 » 2009-07-27 23:51

是的,后来我发现:
additional_images.php文件,要改一下
90行左右
// $thumb_regular = zen_image($base_image, addslashes($products_name), 300, 300,' onclick="changeImg(this)" lowsrc="'.HTTP_SERVER.DIR_WS_CATALOG.$base_image.'" ');//$products_image_large
改成:
$thumb_regular = '<img height="300" width="300" lowsrc="'.HTTP_SERVER.DIR_WS_CATALOG.$base_image.'" onclick="changeImg(this)" title=" Replica Hermes Togo Birkin 35 Handbags " alt="Replica Hermes Togo Birkin 35 Handbags" src="'.$base_image.'"/>';
外贸建站,模板开发,联系:lxq73061@qq.com www.520sz.com
lxq73061
普通会员
普通会员
 
帖子: 44
注册: 2009-06-06 22:06
QQ 帐号: 583964941

Re: 产品详细页多图滚动控制效果的实现

帖子heyb2b » 2009-07-29 21:20

留个记号
heyb2b
普通会员
普通会员
 
帖子: 36
注册: 2008-12-10 8:30

Re: 产品详细页多图滚动控制效果的实现

帖子king_kong » 2009-10-13 12:57

实现不了怎么???
我按照说明把文件传上去了,并改了那全90几行的代码,页面效果就是只有一张产品图片,其他的什么都没有了,
下面全部是白的!·!!!晕哦!!!
king_kong
普通会员
普通会员
 
帖子: 30
注册: 2009-07-13 15:46

Re: 产品详细页多图滚动控制效果的实现

帖子Jason41 » 2009-10-27 15:22

有待研究~~~
头像
Jason41
中级会员
中级会员
 
帖子: 62
注册: 2009-10-19 11:15
QQ 帐号: 1355581167

Re: 产品详细页多图滚动控制效果的实现

帖子fzywy » 2009-10-28 1:37

得到多图图片数据应该有个前提吧,图片是怎么设置文件名的,怎么添加进去呢?
fzywy
 
帖子: 3
注册: 2009-10-08 3:14

下一页

  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 精华共享



在线用户

正在浏览此版面的用户:没有注册用户 和 1 位游客

cron