Lightbox for Zen Cart

March 25, 2009 in Zen Cart Add Ons

Is this useful? Like it.

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 and 1.3.9f

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.

Uninstall

To uninstall, just delete the above files/folders from your server.

Compatibility: Zen Cart 1.3.9 and 1.3.8

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.
  4. The folders “css” and “js” mentioned above contain the original Slimbox 1.6.9 files, from http://www.digitalia.be/software/slimbox (the folders were downloaded from the site — used as is, no modifications at all). So, you can check for updated version from the site and just replace the two folders. You can also see a demo of the slimbox in action at http://www.digitalia.be/demo/slimbox/

Premium Zen Cart templates from $22 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

    Damnit wrong link. Should be this one.

    http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=273

  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!

Premium Templates

Premium 1 Series ($22~25)

Premium 2 Series ($26)

Premium 3 Series ($29)

Premium 4 Series ($28)

Premium 5 Series ($30)

Premium 6 Series ($30)

Premium 7 Series ($35)

Premium 8 Series ($40)