How to implement Lightbox effect in Zencart

Lightbox effect is now the defacto standard for displaying product, category and other images on your website. Javascript popups are a thing of the past and really don’t look that cool. As more and more website content management and e-commerce frameworks provide this feature I will today discuss how we can use this in Zencart.

Zencart provides a very easy to install module known as the “Zen Lightbox” which you can download from the Free Software Add Ons section.

After downloading the module you can run the install.sql and copy the files from the images, classes, functions and languages (do change the folder name to your template where necessary) to your Zencart folder as they are all new files and do not overwrite any existing file. You will need to be more cautious for the files in the modules and templates folders as they will overwrite your existing files.

In my case I just needed to display the lightbox effect for the images on the product detail page so I made the following customizations in the tpl_product_info_display.php file.

1. First I placed a check to make sure whether Zen Lightbox was enabled or not. If it was then I include the necessary files.

<?php
if (ZEN_LIGHTBOX_STATUS == 'true') {
  require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_lightbox/slimbox.php');
  require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_lightbox/autoload_default.php');		
}
?>

2. Then I check whether the image on which the lightbox effect is to be applied is an individual image or part of a gallery.

<?php
if (ZEN_LIGHTBOX_GALLERY_MODE == 'true' && ZEN_LIGHTBOX_GALLERY_MAIN_IMAGE == 'true') {
	$rel = 'lightbox-g';     //in case of image to be part of gallery
} 
else {
        $rel = 'lightbox';       //in case of individual image
}
?>

3. Finally I call the zen_lightbox function which generates the necessary code for the lightbox to take effect.

<a href="<?php echo zen_lightbox('path to product image', 'product name', width, height); ?>" rel="<?php echo $rel; ?>"><img src='path to product image' alt='product name' width='width' height='height'/></a>

Looking above at the 3 steps you can see how easy it is to implement lightbox effect in Zencart. If you would like to view a live example then please click here.

Leave a Reply

Your email address will not be published. Required fields are marked *