Lightbox for Zen Cart

March 25, 2009 in Zen Cart Add Ons

Is this useful? Like it.

UPDATE Nov 27, 2010: Some notes on using this add-on together with Image Handler II. See the “A note on Image Handler II compatibility” section below.

UPDATE Nov 01, 2010: If you find it doesn’t work in Google Chrome, please download again and overwrite the “js” folder – no need to update other files.

If you’re not sure what it is, see demo here (it’s not a Zen Cart site but the same effects — fades the page into dark background and shows the product photo in the same window).

There are already modules available from Zencart.com for adding the lightbox feature for displaying your product images. If you’re interested, you can search the site for the add-ons. But please do read the forum’s support thread for the add-on and see if you’re comfortable with the issues faced by the other users. The add-ons are powerful but a bit complicated (many files involved, cumbersome un-installing and some users faced compatibility issues).

Here is a much easier method to add the Lightbox (this version is actually a Lightbox clone called Slimbox) feature to your Zen Cart store. Only a few additional files, no need to overwrite any files and no database patching involved. Uninstalling means deleting the few files that you have uploaded — simple and painless.


Click here to download for Zen Cart 1.3.8
Click here to download for Zen Cart 1.3.9a,b,c,d
Click here to download for Zen Cart 1.3.9e, 1.3.9f, 1.3.9g, 1.3.9h

Installation

  1. Upload the “css” and “js” folders to the root of your Zen Cart installation — same level with the “admin”, “includes” folders etc. These folders contain the original Slimbox javascript.
  2. Upload the following four Zen Cart files:
    \includes\templates\YOUR_TEMPLATE\common\html_header.php
    \includes\templates\YOUR_TEMPLATE\templates\tpl_modules_main_product_image.php
    \includes\modules\YOUR_TEMPLATE\additional_images.php
    \includes\modules\YOUR_TEMPLATE\main_product_image.php
  3. No settings needed. Go to your Zen Cart site and see the result.

NOTE: Replace YOUR_TEMPLATE with the actual folder name of the custom template that you are using. If you don’t see the folder at any of the location shown above, you need to create the folder.

A note on Image Handler II compatibility

Image Handler II is a recommended add-on for managing your product images and speed up your site. But if you install it, you can see that it has 2 files that “clash” with our slimbox files:

\includes\modules\YOUR_TEMPLATE\additional_images.php
\includes\modules\YOUR_TEMPLATE\main_product_image.php

The trick is to use OUR version of those files instead of the two provided by Image Handler. Then you will have both our Slimbox and Image Handler II working together.

Just install Image Handler II first, then install our Slimbox/Lightbox files.

Uninstall

To uninstall, just delete the above files/folders from your server. If you use Image Handler II, remember to re-upload their version of these two files:

\includes\modules\YOUR_TEMPLATE\additional_images.php
\includes\modules\YOUR_TEMPLATE\main_product_image.php

Other notes:

  1. Works with (or without) Image Handler 2 installed
  2. May not work if you create different images for different size photo of the same product. For example product1_MED.jpg, product1_LRG.jpg and stored in different folders — ‘medium’, ‘large’ folders etc. If you’re manually creating the different sized photos, you should consider installing Image Handler 2 — you just need to upload one large image for a product and Image Handler will create and cache the smaller images for you.
  3. None of the above files should overwrite any of your files in your template. But if you already have the files in your template, please compare and merge the contents. (Except for the Image Handler II case above)
  4. The folders “css” and “js” mentioned above contain the original Slimbox 1.5.8 files, from http://www.digitalia.be/software/slimbox (the folders were downloaded from the site — used as is, no modifications at all).

Compatibility: Zen Cart 1.3.9 and 1.3.8

Premium Zen Cart templates from $19 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Bookmark and Share

Comments

38 Responses to “Lightbox for Zen Cart”

  1. tiffany on March 27th, 2009 11:43 am

    lol,thank you for sharing

  2. jack on March 30th, 2009 6:12 pm

    Thank you for your sharing. I am just a beginner.

  3. Ivy on April 4th, 2009 2:58 pm

    Thanks for sharing it helped me a lot

  4. NorthernPhotoshop on April 8th, 2009 4:24 am

    Until now I was struggling with getting images working the way I wanted on the site, this plugin was just so easy to install and works brilliantly.

    Only one question, how to I get the image box to display the image name in the bottom left?

  5. admin on April 8th, 2009 11:19 am

    Pls use the link above to download again, I’ve updated.

    If you have already installed, then you just need to update ONE file:

    \includes\templates\YOUR_TEMPLATE\templates\tpl_modules_main_product_image.php

  6. steve on April 19th, 2009 7:18 am

    Great feature .. Wonderful!

    Would you know how I can setup a Slimbox for multiple images? I am having extreme difficulties setting up or even finding ways to have multiple images per product.

    Thank you

  7. admin on April 19th, 2009 10:03 am

    For images, pls see http://tutorials.zen-cart.com/index.php?article=224 and http://tutorials.zen-cart.com/index.php?article=58

    My recommendation would be, install Image Handler 2 ( http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=117 )

    Then you just need to upload one image thru admin.. the smaller images will be created automatically for you.

    And for the extra image, just use FTP to upload to the same folder using the same file name …except with additional _01, _02 etc.

    For example, if you original image is productabc.jpg .. then use FTP to upload productabc_01.jpg, productabc_02.jpg

  8. Hugo on April 21st, 2009 1:20 pm

    Thanks for the help. Removing Slimbox after I installed Image handler and re-installing Slimbox again made everything work smoothly.

    It’s not a big deal because the “Lightbox” effect is beautiful. But, how can I add the Title or perhaps custom titles to each image. Come to think of it, it is not necessary because the image should speak for itself. But, I would like to know if it is possible.

    Also, I noticed there is a Lightbox 2 version by Lokesh Dhakar … will you be updating this Lightbox for Zen Cart with the latest features?

    By the way, I am extremely grateful for your site and work … Thank you! Thank you! Thank you!

  9. admin on April 21st, 2009 1:38 pm

    Hugo,

    This version is actually based on Slimbox and is meant to be very simple to install/uninstall and looks good enough for most users. Therefore, I probably won’t make it more complicated than it is now.

    There are already more advanced and powerful Zen Cart lightbox add-ons available.. but comes with compatibility issues, cumbersome install/uninstall, involves lots of files and database patching etc. So, it may be intimidating for new users. You can search the official Zen Cart forum and read the threads for those add-ons.

    (I actually created this add-on after trying one of the advanced versions for a client, but can’t get it to work fully .. and found it cumbersome to remove/uninstall 100% :D )

    As for the title, it’s displayed at the bottom left of the popup image right?

  10. Hugo on April 23rd, 2009 4:37 am

    Hello,

    Wow, yes, I love how fluidly your “Lightbox” add-on works on my site. You did a marvelous job.

    Re: http://hugocruzgallery.com/shop/index.php?main_page=product_info&cPath=1_2&products_id=1

    Please refer to the above product link. Unfortunately, the “Title” (which I assume in this example would be “Bowing Matrix”) is not displayed on the bottom left of the lightbox photo. How can i fix this so that the Title does appear?

    Also, it’s not a huge deal, but just a matter of preference for me. How can I move the thumbnails for the additional images, make them smaller and fit them BELOW the MAIN Image AND justified so it stays within the width of the Main Image? (see illustration)

    XXXXXXXXXXXXXXXXXXXXXXXXX TITLE
    X X PRICE
    X X DESCRIPTION
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    X X
    XXXXXXXXXXXXXXXXXXXXXXXXX

    XXXXXXX XXXXXXX XXXXXXX
    XthumbX XthumbX XthumbX
    X 1 X X 2 X 3 X
    XXXXXXX XXXXXXX XXXXXXX

    XXXXXXX XXXXXXX XXXXXXX
    XthumbX XthumbX XthumbX
    X 4 X X 5 X etc X
    XXXXXXX XXXXXXX XXXXXXX

  11. Hugo on April 23rd, 2009 5:05 am

    Sorry, illustration is as follows:

    XXXXXXXXXXXXXXXXXXXXXXX TITLE
    X———————X PRICE
    X———————X DESCRIPTION
    X———————X
    X———————X
    X——-MAIN———-X
    X——-IMAGE———X
    X———————X
    X———————X
    X———————X
    X———————X
    X———————X
    X———————X
    X———————X
    X———————X
    XXXXXXXXXXXXXXXXXXXXXXX

    XXXXXXX XXXXXXX XXXXXXX
    XthumbX XthumbX XthumbX
    X–1–X X–2–X X–3–X
    XXXXXXX XXXXXXX XXXXXXX

    XXXXXXX XXXXXXX XXXXXXX
    XthumbX XthumbX XthumbX
    X–4–X X–5–X X-etc-X
    XXXXXXX XXXXXXX XXXXXXX

  12. admin on April 23rd, 2009 11:08 am

    You may be using the old version of this add-on? Pls see comments number 4 and 5 above.

    The thumbnail size of the extra images follow the size of the thumbnails of the front page.
    Admin > Config. > Images

  13. RyanZEN on May 1st, 2009 7:48 pm

    Tried to install this today, the light box works but i get a blank picture.. I’ve no idea how to get it to work. You did mentioned there may be problem with different size being used eg _LRG.

  14. admin on May 2nd, 2009 12:27 am

    Yup, if you manually create the thumbnails for your product pics.. I recommend you install Image Handler 2 (the small and medium images are created automatically for you and you just need to upload the large image, no need to worry abt the suffixes)

    Btw, if you email me the URL of your site, I may be able to have a look.

  15. kauai on May 2nd, 2009 5:14 am

    Hi,
    I’ve just finished installing lightbox and I uploaded the necessary files to the root folder.
    Was I supposed to upload these files to the root folder too?

    \includes\templates\YOUR_TEMPLATE\common\html_header.php
    \includes\templates\YOUR_TEMPLATE\templates\tpl_modules_main_product_image.php
    \includes\modules\YOUR_TEMPLATE\additional_images.php
    \includes\modules\YOUR_TEMPLATE\main_product_image.php

    I did upload those files to the root folder and it doesn’t seem to work.

    Am I doing something wrong.

    Here’s my website.

    http://www.palekika.com

  16. RyanZEN on May 2nd, 2009 8:34 am

    Well Vincent, I did installed image handler at one point but deleted it, I didn’t get to fully understand the module and was unaware that you could use it on a mass scale. My entire gallery was done manually and FTP to site.

    My site is already up, I’m very pessimistic to add new modules. Which is why I have your lightbox installed and not the heavy version. Is there anyway I could get it to work without image handler for now?

  17. RyanZEN on May 2nd, 2009 9:37 am

    Just installed imagehandler 2. It makes no difference. I want this to work.

  18. admin on May 2nd, 2009 10:41 am

    RyanZEN,
    The 4 files are supposed to be inside templates folders, NOT the root folder:

    An example: if you’re using “free template 3″

    \includes\templates\freetemplate3\common\html_header.php

    ———————–

  19. kauai on May 2nd, 2009 1:27 pm

    It works! I put them in the right folder and presto, they changed immediately. Thanks again! I appreciate all you do.

  20. RyanZEN on May 2nd, 2009 1:38 pm

    well, I removed those files as it didnt work. Now that I have put it back can you check where it has gone wrong?

  21. admin on May 2nd, 2009 1:45 pm

    You mean Image Handler 2 right?

    It seems you have not installed it. Upload all the files ( get from http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=117 )

    See instructions at http://breakmyzencart.com/ih-doc

    Remember, the last step, you need to install using your admin (Tools > Image Handler 2 > Install )

  22. RyanZEN on May 2nd, 2009 1:56 pm

    Image Handler already been installed, hasnt been removed yet as I do see the advantage of it.

    As for the Light Box, the files have been put in to it relevant folders.
    CSS & JS

  23. admin on May 2nd, 2009 3:52 pm

    Palekika site — Lightbox working, but Image Handler 2 not working

    Gossipflorist site — Image Handler working, but lightbox not working.

    For both sites, I suggest you remove lightbox, then make sure Image Handler is working first… then only you add lightbox.

    PS: I’m sure lightbox and image handler 2 works together as I’ve tried on numerous sites

  24. RyanZEN on May 2nd, 2009 3:59 pm

    I have no idea on this vincent, Ive been removing and adding LightBox files several times now. It doesnt seem to work even with Image Handler. Looks like I will have to try the other version which I do not want.

  25. admin on May 2nd, 2009 4:08 pm

    As my earlier reply, pls remove/delete lightbox and make sure Image Handler 2 works first. It is important that you get Image Handler 2 to work as it’s a really useful add-on. Then you can try any other add-ons.

  26. RyanZEN on May 2nd, 2009 4:51 pm

    Everything works now, I ended up installing Zen Light box http://www.zenflavor.com/lightbox-for-zen-cart.html#comments

    I would prefer if your Light Box had worked for mine.

  27. RyanZEN on May 2nd, 2009 4:58 pm
  28. kauai on May 2nd, 2009 10:19 pm

    I uninstalled lightbox and installed image handler first, then reinstalled lightbox. Seems to work good. Thanks.

  29. mike on May 4th, 2009 5:08 pm

    I get the image in a new explorer page. This happends for me on another site when no script was loaded.
    Any ideea why is this happening?
    The same happend with the Zen lightbox

  30. admin on May 4th, 2009 5:32 pm

    Hi Mike,

    You’ve answered the question yourself “This happends for me on another site when no script was loaded.” :)

    If the javascript is not loaded or when the image is clicked before the javascript is fully loaded, the lightbox will not function and the large image will open in a new tab/window.

    This is the same for all types of lightbox scripts.. not only slimbox or Zen Cart.

  31. mike on May 4th, 2009 6:10 pm

    But here i have all the path ok to the js script and still not loading. Any ideas? Do i need to install something else additionaly?

  32. admin on May 4th, 2009 6:37 pm

    No, just make sure all the files and folders are uploaded to the correct location… and your web browser has Javascript enabled.

  33. mike on May 4th, 2009 6:42 pm

    Thank you for the support! if i manage to make it work i’ll leave a post.
    Thanks again!

  34. Liberty on May 19th, 2009 2:51 pm

    I am having trouble with the next/prev buttons. They aren’t there and no matter where I place the images it seems the lightbox cannot locate them. Please help – what am I doing wrong? Thank you.

  35. admin on May 19th, 2009 3:20 pm

    There are no next/prev buttons on the popup. This is meant to be the simplest (to use, install or remove) lightbox implementation for zencart.

    If you’re already familiar with Zen Cart, you can try the other advanced add-ons from Zencart.com

  36. Brian on June 19th, 2009 9:47 am

    I have IH2 and Slimbox the lightbox clone installed…I can’t get the watermarks to show when activated in IH2…any ideas?

  37. admin on June 19th, 2009 10:33 am

    Brian,

    Yes, the auto watermark does not work because the large image for the lightbox bypasses the IH2.

  38. Lee on June 27th, 2009 2:06 am

    Cheers this mod worked perfect, first time, looks great when i clicked a picture!


Zen Cart Templates

Premium 1 Series ($19~22)

Premium 2 Series ($23)

Premium 3 Series ($25)

Premium 4 Series ($25)

Premium 5 Series ($26)

Premium 6 Series ($26)

Premium 7 Series ($28)

Premium 8 Series ($37)

Premium 9 Series ($33)

7 Days A Week E-mail Support