首页 >> E商学院 >> zencart百科 >> Zen Cart 简易实现LightBox灯箱效果

Zen Cart 简易实现LightBox灯箱效果

于文前先简要介绍一下
什么是LightBox灯箱效果,也有称之为遮罩层效果,
这是一种近年来随AJAX技术广泛应用后,
逐渐被人们所熟悉和喜爱的一种WEB前端展示效果,
这种效果将原来需要弹出新窗口的内容页面直接在当前页面无刷新加载显示,
显示对应的内容同时一般伴随着将背景变暗或反色,
以高亮突出当前内容区块,
点击非内容区域时无刷新返回原内容展示页,
整个展示效果如同城市夜晚随处可见的广告灯箱效果,故而得名 LightBox
(灯箱效果);
如下图示 (点击图片查看大图同时本文这种图片展示效果也是一种标准的灯箱展示效果):

目前基于各个JS库的LightBox插件比比皆是, 在进行前端设计时, 可随意按需按喜好取用,

回到本文正题: 在Zen Cart模板制作时, 大多也会采用这种效果用来展示商品页的诸图片;
基于 Zen Cart的 LightBox
模块也有数多个, 比如本博曾经发布过的 JQlightbox+JQZoom
for Zen Cart 修改版,

这些模块与本文所介绍的实现方式相较来说其结果都是一样的, 区别只在于本文所使用的方法,
不涉及数据库不涉及后台只单纯的为商品页面增加 LightBox 灯箱效果涉及的改动较少,
不影响程序本身的健壮性和日后更新维护拓展; 不需其他模块支持, 兼容性较好!
比较适合刚接触Zen
Cart的新人掌握与使用;
本文介绍和使用的 LightBox基于 JQuery 库可在下面的地址中下载和查看详细的介绍与配置整合说明
http://leandrovieira.com/projects/jquery/lightbox/

下面开始操作:
操作前需要先在当前网站引入 JQuery 库版本不限建议 1.42以上
本文教程
直接使用 Google CDN代码托管引入
实际操作中可按需选择托管还是本地加载,

将上面下载到本地的 JQlightBox 打包文件解压后,
将其下的 images 文件夹中的诸图标文件复制到当前网站根目录下的 images
目录下;
将 js 文件夹下的 jquery.lightbox-0.5.pack.js 文件复制到自己当前模板目录下的 jscript
文件夹下,
将 css文件夹下的 jquery.lightbox-0.5.css 文件复制到自己当前模板目录下的 CSS 文件夹下.

打开 includes/templates/你的模板/common/html_header.php
如果没有上面的文件或文件夹
就去默认的模板 template_default 目录下复制一份过来,
(此步骤强烈建议如此操作但不是必需操作项)
至于为何这样作可参见
Zen
Cart的文件替代机制

然后在 </head> 前引入 JQ库和 JQlightBox JS库及 JQlightBox样式表文件
代码如下:

<link rel="stylesheet" type="text/css" href="includes/templates/你的模板目录名/css/jquery.lightbox-0.5.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="includes/templates/你的模板目录名/jscript/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
 <!--
  $(function() {
    $('#productMainImage a,#productAdditionalImages a').lightBox();
  });
 //-->
</script>

这里特别说明一下, 如果采取的是本地加载的方式,
则可以直接将 JQuery 库和 JQlightbox JS库命名为 jscript_
开头的任意文件名,
然后将其粘贴到当前模板目录下的 jscript 文件夹下则Zen Cart程序默认会自动加载 ,
而不需要上面的文件修改.
但命名时需要注意, JQuery 库的文件名一定要优先于其他JQ插件命名的优先级,
即一定要先于其他JQ插件被加载,
否则将导致先于JQuery 库加载的插件无法正常运行切记很重要!!!

然后打开 includes/modules/你的模板目录名/additional_images.php
没有对应的文件就去
includes/modules/下复制一份同名文件过来,
清空原文件里面的代码后将下面的代码复制进去并保存退出

<?php /**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: additional_images.php 6132 2007-04-08 06:58:40Z drbyte $
 *
 * @ 商品多图 灯箱效果
 * @ By KIRA
 * @ 6171718
 * @ http://zcbk.org/
 *
 */ if (!defined('IS_ADMIN_FLAG')) {die('Illegal Access');} if(!defined('LARGE_IMAGE_MAX_WIDTH')) define('LARGE_IMAGE_MAX_WIDTH', MEDIUM_IMAGE_WIDTH); if(!defined('LARGE_IMAGE_MAX_HEIGHT')) define('LARGE_IMAGE_MAX_HEIGHT', MEDIUM_IMAGE_HEIGHT); if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes'); $images_array = array(); if ($products_image != '') { $products_image_extension = substr($products_image, strrpos($products_image, '.')); $products_image_base = str_replace($products_image_extension, '', $products_image); if (strrpos($products_image, '/')) { $products_image_match = substr($products_image, strrpos($products_image, '/')+1); $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_'; $products_image_base = $products_image_match; } $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/'))); if ($products_image_directory != '') { $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/"; } else { $products_image_directory = DIR_WS_IMAGES; } $file_extension = $products_image_extension; $products_image_match_array = array(); if ($dir = @dir($products_image_directory)) { while ($file = $dir->read()) { if (!is_dir($products_image_directory . $file)) { if (substr($file, strrpos($file, '.')) == $file_extension) { if(preg_match("/" . $products_image_base . "/i", $file) == 1) { if ($file != $products_image) { if ($products_image_base . str_replace($products_image_base, '', $file) == $file) { $images_array[] = $file; } else { } } } } } } if (sizeof($images_array)) { sort($images_array); } $dir->close(); } } $num_images = sizeof($images_array); $list_box_contents = ''; $title = ''; if ($num_images) { $row = 0; $col = 0; if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) { $col_width = floor(100/$num_images); } else { $col_width = floor(100/IMAGES_AUTO_ADDED); } for ($i=0, $n=$num_images; $i<$n; $i++) { $file = $images_array[$i]; $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension; if(defined(IH_RESIZE)) $flag_has_large = true; else $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file); $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large); $base_image = $products_image_directory . $file; $thumb_slashes = zen_image($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes); $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large); $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>'; $lightBox_img = '' . ($flag_display_large ? '<a href="' . $products_image_large.'">' . $thumb_regular . '</a>' : $thumb_regular ) . ''; $link = $lightBox_img . "\n " . $noscript_link; $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"', 'text' => "\n " . $link); $col ++; if ($col > (IMAGES_AUTO_ADDED -1)) { $col = 0; $row ++; } } }

然后前台看一下商品的多图就以经具备灯箱展示效果
接下来继续给商品主图也加上灯箱效果
打开
includes/templates/你的模板目录名/templates/tpl_modules_main_product_image.php
将

1
2
3

<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) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>'); //--></script>

替换为下面代码即可

1	<?php echo '<a href="images/'.$products_image.'" title="'.$products_name.'">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</a>';?>

至此整个商品页的图片展示全部被赋予了灯箱效果,

如果你对代码还具有点先天性的洁癖和强迫症的话也可以考虑为上面的诸支持库文件的引入加一个页面条件判读
比如说只在商品页面加载就改成
下面的代码

<?php if ($current_page_base == 'product_info') { ?> <link rel="stylesheet" type="text/css" href="includes/templates/你的模板目录名/css/jquery.lightbox-0.5.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="includes/templates/你的模板目录名/jscript/jquery.lightbox-0.5.pack.js"></script> <script type="text/javascript"> <!-- $(function() { $('#productMainImage a,#productAdditionalImages a').lightBox(); }); //--> </script> <?php } ?>

另外也可以参照 JQlightBox 官方站的说明文档进行更高级的效果配置
比如

<script type="text/javascript"> <!-- $(function() { $('#productMainImage a,#productAdditionalImages a').lightBox({ overlayBgColor:"#5A5A5A", overlayOpacity:0.8, containerBorderSize:10, containerResizeSpeed:400 }); }); //--> </script>