Zen Lightbox v1.4 Documentation

• Introduction
• What's New
• Installation
• Upgrade
• Version History
• FAQs
• Support
• Donations

This contribution adds lightbox support to Zen Cart. All large product images will be displayed within a lightbox. This eliminates the need for popup windows and makes your website much more user friendly. Additional product images are displayed within a simple gallery interface.

Credit is due to Lokesh Dhakar for creating Lightbox JS v2 and Chris Boylan for his work on the Image Handler 2 support.

In addition, I would like to thank the Zen Cart Team for creating the best open source ecommerce package available!

Version 1.4 - Release Date: 2007-09-23

• Renamed Zen Lightbox function, various files and folders
• Improved use of the overrides system for JavaScript and image files
• Added admin switch to enable/disable Zen Lightbox
• Added admin switch to adjust the overlay opacity
• Added admin switch to adjust the overlay fade duration
• Added admin switch to enable/disable resize animations
• Added admin switch to adjust the resize speed
• Added admin switch to adjust the border size
• Added admin switch to enable/disable the lightbox from closing when you click on the overlay
• Added admin switch to enable/disable Flash objects from being hidden when the lightbox is displayed
• Added admin switch to specify a DIV class to hide when the lightbox is displayed
• Added lightbox functionality to document_general_info, document_product_info, product_free_shipping_info, product_music_info, product_reviews, products_reviews_info and product_reviews_write pages.
• Updated Lightbox JS v2 code to version 2.03.3
• Reverted to original CSS code (with custom fixes)
• Fixed model number display error on product_reviews page
• Added code to load all lightbox resources before image loading is complete
• Updated support for Zen Cart 1.3.7.1 and Image Handler 2.0 v0916
• Removed close link from lightbox image

This version of Zen Lightbox has been designed for use with Zen Cart 1.3.7.1 only.

Please remember to backup your website files and database before you continue.

To install Zen Lightbox follow the steps below.

1. Download the latest version of Zen Lightbox from:
   http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=273
   
   
2. Extract the contents (of zen_lightbox_v1-4.zip) to a temporary location, keeping the file structure intact. (Note: If you can't open this file try using 7-Zip, it's free!)
   
   
3. Rename the following folders to match your template folder name.
   
   includes\modules\YOUR-TEMPLATE-FOLDER
   includes\templates\YOUR-TEMPLATE-FOLDER
   
   
4. Upload the entire contents of the includes folder to your server, again keeping the file structure intact. (Note: All files make use of the overrides system, with the exception of includes/modules/pages/product_reviews/header_php.php. This file will have to be overwritten.)
   
   
5. Run the install.txt file (Admin > Tools > Install SQL Patches) in your Zen Cart admin. (Note: It's best to copy and paste the contents of install.txt into the text area and then press the send button.)

Zen Lightbox is now installed and ready to use!

You can configure various settings from the Zen Cart admin (Admin > Configuration > Zen Lightbox).

The code, file structure and file names have changed a lot compared to previous versions. I would recommend the following steps if you are planning to upgrade.

1. Completely remove your old installation of Zen Lightbox. (Note: Open the old RAR file (e.g. zen_lightbox_v1-3.rar) and remove any files listed that exist on your live website.)
   
   
2. Upgrade to Zen Cart 1.3.7.1. (If required.)
   
   
3. Remove or replace any old Flash by-pass code from your template files. (If required.)
   
   By default, all Flash objects will now be hidden when the lightbox is displayed. DIV tags similar to these should be removed, if they contain Flash objects.
   
   
   <div class="flash">YOUR-FLASH-HERE</div>
   
   If you are using the DIV tags, as shown above, to hide other page elements (such as CSS menus) you should replace them with the following.
   
   
   <div class="zenLightboxHideMe">YOUR-ELEMENTS-HERE</div>
   
   Please click here for more information.
   
   
4. Follow the Installation instructions above.

Version 1.3 - Release Date: 2006-10-20

• Added support for Image Handler 2
• Fixed apostrophes error in image display code
• Updated CSS file (compressed by 15.8%) using CSS Tidy at Clean CSS
• Updated source formatting of various files

Version 1.2 - Release Date: 2006-09-07

• Removed redundant images files (prev.gif and next.gif)
• Fixed width of previous and next links
• Added close link to lightbox image
• Added Flash by-pass code to avoid overlay issues
  

Version 1.1 - Release Date: 2006-09-06

• Added support for additional images

Version 1.0 - Release Date: 2006-09-05

• Initial release

Below is a list of frequently asked questions, submitted both via the Zen Cart Support forums and email.

How do I setup additional images for my products?
While this question isn't directly related to Zen Lightbox, I find that a lot of people have trouble setting up additional images and, therefore, are unable to experience the gallery feature of Zen Lightbox. Please read the tutorial at the link below to understand how additional images work.

http://tutorials.zen-cart.com/index.php?article=58

How can I hide Flash and other objects when the lightbox is displayed?
By default, Zen Lightbox will hide all Flash objects when the lightbox is displayed. In addition to this, all page elements within the following DIV tag will also be hidden.

You can enable/disable Flash objects from being hidden and also change the DIV class value from the Zen Cart admin (Admin > Configuration > Zen Lightbox).

How do I change the colour of the overlay?
Open includes/templates/YOUR-TEMPLATE-FOLDER/css/stylesheet_lightbox.css and find the following code, which should be at the bottom.

Now, change the background-color value to the colour of your choice.

You will find the official support thread at the link below. Please feel free to post any comments or questions there.

http://www.zen-cart.com/forum/showthread.php?t=45314

Alternatively, I offer a commercial service for custom installations, upgrades and troubleshooting.

Please contact me for more information.

If you find Zen Lightbox useful, please consider donating. All PayPal donations are greatly appreciated.

Donations will help me devote more time to developing Zen Lightbox and ensure that it is compatible with all future releases of Zen Cart.