简易实现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基础); 不难写出各种适应自己当前模板的样式布局和一个酷绚的商品图片展示切换效果来, 如果还不能够实现, 又特别需要此效果功能的, 同样 可以继续代为修改, 也同样不免费哦 亲~ .
可以点击 下面的 支付宝但保交易 链接 购买此服务,
亦或参见 博客右上角的 联系方式添加 QQ好友或Email 或本文下面留言 咨询.
作者: KIRA
你可以 发表评论 ，并在保留 原文地址 及作者信息的情况下 引用 到你的网站或博客。
转载请注明: 简易实现Zen Cart商品页多图显示与切换 | Zen Cart 中文博客 +复制链接
关键字: zen cart修改, 商品多图
试了。搞不成这么漂亮的效果。。修改后和 之前没什么变化。QQ:133266398 请大虾们多多指教···
请君抬眼 右上角不远处
1
#smallImg a{float: left; display: block;}
JavaScript 基本功能部分, 不好意思 同样一句
1
function showDaTu(src){document.getElementById(“defaultImg”).src=src;}
这两个在哪里改阿？
唉~~~
请君 仔细看后文