首 页  >>  E商学院  >>  zencart百科  >>  简单实现Zen Cart商品页面图多的显示与切换

简单实现Zen Cart商品页面图多的显示与切换

简单实现Zen Cart商品页面图多的显示与切换

之前, 曾发布过 如何为商品页添加多图 ,
这里再附一个更简单的方法,


与前文相比, 本方法更精简简易, 不需要格外引入JQuery库,


纯JS实现, 兼容性更佳, 体积更小巧, 比较适用于动手能力相当差的同学,


哪么有多简单呢?




先来看一下 DOM结构, 基本样式部分, 不多, 一句








1


 #smallImg a{float: left; display: block;}




JavaScript 基本功能部分, 不好意思 同样一句








1


 function showDaTu(src){document.getElementById("defaultImg").src=src;}




HTML结构部分 如果不打算为其添加 灯箱展示效果 下面的结构代码中的 锚标签都是可以省略掉的:


如何 添加灯箱展示效果 可参见 Zen Cart
简易实现LightBox灯箱效果   一文,










1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


 <div id="demo">
   <!-- 主图展示开始 -->
   <div id="mainImg">
    <a href="images/demo01.jpg">
     <img src="images/demo01.jpg" width="300" height="220" id="defaultImg">
   </a>
  </div>
  <!-- 多图展示与切换开始 -->
  <div id="smallImg">
   <a href="images/demo01_1.jpg">
    <img src="images/demo01_1.jpg" width="80" height="60" onmouseover="showDaTu('images/demo01_1.jpg')">
   </a>
   <a href="images/demo01_2.jpg">
    <img src="images/demo01_2.jpg" width="80" height="60" onmouseover="showDaTu('images/demo01_2.jpg')">
   </a>
   <a href="images/demo01_3.jpg">
    <img src="images/demo01_3.jpg" width="80" height="60" onmouseover="showDaTu('images/demo01_3.jpg')">
   </a>
   <a href="images/demo01_4.jpg">
    <img src="images/demo01_4.jpg" width="80" height="60" onmouseover="showDaTu('images/demo01_4.jpg')">
   </a>
   <div class="clear"></div>
  </div>
 </div>




如此几句代码 便实现了很多人想要的多图显示 并随鼠标事件切换效果,






下面 继续把上面的代码套在 Zen Cart 上,


只要把结构弄明白了, 哪么往Zen Cart套这段代码就只剩下纯手工的事儿了,




打开 includes/templates/你的模板目录名/templates/tpl_modules_main_product_image.php
这个文件













1


 <?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>




后添加一句










1
2
3
4
5


 <script type="text/javascript">
  <!--
   function showDaTu(src){document.getElementById("defaultImg").src=src;}
  //-->
 </script>













1
2
3
4
5


 <script language="javascript" type="text/javascript"> <!-- document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT,' onmouseover="showDaTu(\''.$products_image_medium.'\')"'') . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
  //-->
 </script>




替换为










1


 <?php echo '<a href="'.$products_image_large.'" title="'.$products_name.'">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT,' id="defaultImg"') . '</a>';?>




打开 includes/modules/你的模板目录名/additional_images.php  这个文件




查找










1


 $thumb_slashes = zen_image($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);




替换为










1


 $thumb_slashes = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,' onmouseover="showDaTu(\''.$base_image.'\')"');




继续查找










1


 $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . $large_link . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';




将其替换为










1


 $script_link = '' . ($flag_display_large ? '<a href="' . $products_image_large.'">' . $thumb_slashes . '</a>' : $thumb_slashes ) . '';




OK 完事儿 收工!!!




惯例 附一张效果图:





温馨提示:
按本文和之前的相关文章(参见文中链接) 配合自己一定的动手能力 (只要稍有一点HT?ML+CSS基础);
不难写出各种适应自己当前模板的样式布局和一个酷绚的商品图片展示切换效果来, 如果还不能够实现, 又特别需要此效果功能的, 同样 可以继续代为修改,
也同样不免费哦 亲~ .


可以点击 下面的 支付宝但保交易 链接 购买此服务,

 


点击次数:1091  发布日期:2013-04-15  【打印此页】  【关闭