首页 >> E商学院 >> zencart百科 >> 简单实现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灯箱效果一文,

 <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)); ?>

后添加一句

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

将

 <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>

替换为

 <?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.'\')"');

继续查找

 $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>';