Zen Lightbox v1.6.4 ZC 1.5 Documentation

Introduction

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.

As of v1.5, support for the lightbox effect on any page (including EZ-Pages) and keyboard navigation have been added. In addition to this, the source code has been optimised and the size of the JavaScript code has been reduced by 52.23%.

Credit is due to Christophe Beyls for creating Lightbox JS v2, Chris Boylan for his work on the Image Handler 2 support and the Zen Cart Team for creating the best open source ecommerce package available!

Example Image

What's New

Version 1.6.4_1.5 - Release Date: 2012-04-28

Installation

This version of Zen Lightbox has been updated and tested for use with Zen Cart 1.5

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.6.4_1.5-20120428.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. Open the 1_Installer_Files folder

  4. Rename the following folders to match your template folder name.

    includes\languages\english\extra_definitions\YOUR-TEMPLATE-FOLDER
    includes\modules\YOUR-TEMPLATE-FOLDER
    includes\templates\YOUR-TEMPLATE-FOLDER

  5. Rename the following folder to match your admin folder
    6. YOUR-ADMIN

  6. Upload the entire contents of the 1_Installer_Files folder, includes folder and the images folder to your server, again keeping the file structure intact. (Note: All files make use of the overrides system.)

  7. Open the 2_SQL folder and then open the install.sql file in a text editor (not microsoft word) and copy all of the text. Next go to (Admin > Tools > Install SQL Patches) in your Zen Cart admin and paste the contents of install.sql into the text area and then press the send button.

  8. Alternative to step 6. Open phpMyAdmin for your site and navigate to your database. Choose 'Import' and then 'choose file' and navigate to and select install.sql then choose 'Go'.

Zen Lightbox is now installed and ready to use!

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

EZ-Pages

By default the lightbox effect will be applied to all links that point to images on your EZ-Pages. This functionality can easily be modified via the admin.

The gallery mode will automatically be used when more than one link to an image (on an EZ-Page) are located within the same parent element.

The only manual bit of coding required is the addition of captions (if you need them). You can add captions by including the rel="" attribute in your href tag. An example of this can be found below.

<a href="myimage.jpg" rel="here is my caption">My Image</a>

Any page

The above EZ-Pages functionality can be added to any page of your website.

To enable this, simple copy the jscript_zen_lightbox.php file (found at the root of the distribution) to the relevant modules/pages folder.

For example, if you wanted to apply this functionality to the contact_us page you would copy the above file to: includes/modules/pages/contact_us

Upgrade (fresh installation is recommended)

Upgrading from Zen Lightbox 1.6.3

File updates:

Upgrading from Zen Lightbox 1.6.2

NOTE: You will need to run upgrade.sql in your phpMyAdmin OR zen cart admin.

File updates:

Upgrading from Zen Lightbox 1.6.1

NOTE: You will need to run upgrade.sql in your phpMyAdmin OR zen cart admin.

File updates:

Upgrading from Zen Lightbox 1.6

NOTE: You will need to run upgrade.sql in your phpMyAdmin OR zen cart admin.

File updates:

If you are upgrading from Zen Lightbox 1.5 or Lower see below

Upgrading from Zen Lightbox 1.5

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.

If upgrading from v1.5 please ensure that you run the upgrade.sql script (via Admin > Tools > Install SQL Patches) before you proceed.

  1. Completely remove your old installation of Zen Lightbox. (Note: Open the old ZIP file (e.g. zen_lightbox_v1-5.zip) and remove any files listed that exist on your live website. Previous releases of Zen Lightbox are available to download from the same page as the current release - just scroll down a bit.)

  2. Upgrade to Zen Cart 1.3.9h. (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. However, keeping these divs in place will do no harm.

    <div class="flash">YOUR-FLASH-HERE</div>

    <div class="zenLightboxHideMe">YOUR-ELEMENTS-HERE</div>

  4. Follow the Installation instructions above.

Version History

Version 1.6.4_1.5 - Release Date: 2012-04-28/p>

Version 1.6.3_1.5a - Release Date: 2012-03-11

Version 1.6.3 - Release Date: 2011-12-31

Version 1.6.2 - Release Date: 2011-01-23

Version1.6.1 - Release Date: 2011-01-15

Version 1.5 - Release Date: 2008-12-18

Version 1.4 - Release Date: 2007-09-23

Version 1.3 - Release Date: 2006-10-20

Version 1.2 - Release Date: 2006-09-07

Version 1.1 - Release Date: 2006-09-06

Version 1.0 - Release Date: 2006-09-05

FAQs

Below is a list of frequently asked questions.

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

#lbOverlay{background-color:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}

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

Support

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