Zen Lightbox addon [Support Thread]

maxter:

I put the small image in: images/myimage.jpg and the large in: images/large/myimage_LRG.jpg
certainly something wrong
The tutorial for images takes a reading or two to get it, but if you don't get things to work before lightbox, it seems to be a problem with lightbox when its not.

Think of it this way may help.... you need a container to hold the images you plan on using for a product type.... say PRODUCTS or AUCTIONS...

your small images would then be..
images/PRODUCTS/12324.jpg

your medium
images/medium/PRODUCTS/12324_MED.jpg

your large
images/large/PRODUCTS/12324_LRG.jpg

same with auction images
your small images would then be..
images/AUCTIONS/12324.jpg

your medium
images/medium/AUCTIONS/12324_MED.jpg

your large
images/large/AUCTIONS/12324_LRG.jpg

That's basically what I did... except for the medium... think the tutorial also talks about dropping everything into one folder as long as the _LRG _MED is on the files works too, but I like keeping mine as above...

To test to see if all is working right as should... turn off scripting and the normal popup should work... check the image file name.

Great add-on and got it working on 2 different stores. Cannot get it to work on ezpages, however? I know it says to add the jscript_zen_lightbox.php file to the file in modules>pages but there is no file for the ezpage folders I created? Any ideas? Thanks!

davewest:

The tutorial for images takes a reading or two to get it, but if you don't get things to work before lightbox, it seems to be a problem with lightbox when its not.

Think of it this way may help.... you need a container to hold the images you plan on using for a product type.... say PRODUCTS or AUCTIONS...

your small images would then be..
images/PRODUCTS/12324.jpg

your medium
images/medium/PRODUCTS/12324_MED.jpg

your large
images/large/PRODUCTS/12324_LRG.jpg

same with auction images
your small images would then be..
images/AUCTIONS/12324.jpg

your medium
images/medium/AUCTIONS/12324_MED.jpg

your large
images/large/AUCTIONS/12324_LRG.jpg

That's basically what I did... except for the medium... think the tutorial also talks about dropping everything into one folder as long as the _LRG _MED is on the files works too, but I like keeping mine as above...

To test to see if all is working right as should... turn off scripting and the normal popup should work... check the image file name.

Your pattern was very clear.
I followed it and now everything works fine.
Thanks

dcitsolutions:

I thought I was having an issue with Zen Lightbox, but it appears as though this issue may be related to Google Chrome and I was wondering if anyone else has had this issue or if there is a known solution.

The Issue:
When clicking on an image to show the lightbox image, a white box comes up but no image or links become visible. This only happens in Google Chrome.

The Testing:
Two different systems tested: 1 x Windows 7 Ultimate x64, 1 x Windows XP Pro x32
Two websites tested:
http://flowerswithstyle.com.au
http://www.scrapdillyishious.com/shop/
The following browsers have been tested:

• Google Chrome v7.0.503.0)

• Firefox v4.0b4

• Internet Explorer v8.0.7600.16385

• Opera v10.61

• Safari v5.0.1 (7533.17.8)

• K-Meleon v1.5.4

• SeaMonkey v2.0.6

• Avant v2010 build 111

• Maxthon v3.0.17.1000

Every browser tested display the lightbox without issue apart from Google Chrome.

I at first thought that maybe it was to do with a jscript/code conflict on the site I was working on, but then I tested another site with lightbox and experienced the same issue.

This being said I had till now only tested sites proclaiming to use Zen Lightbox.

I navigated to the following page to test lightbox outside of the Zen Lightbox mod and was suprised to find that the lightbox displayed in Google Chrome without issue:
http://www.huddletogether.com/projects/lightbox2/

So, it now appears as though the issue is related to Google Chrome and Zen Lightbox.

Further Testing:
I decided I would try a different version of Google Chrome as the version I was using was the latest Beta version. I uninstalled this (on my XP machine) and installed the latest release (Google Chrome v5.0.375.127). Low and behold, lightbox now works!

Where To From Here:
The above testing and the fact that Zen Lightbox is not working with Google Chrome v7.0.503.0 but Lightbox does work outside of the Zen Lightbox mod suggests that Zen Lightbox may need to be looked at as far as compatibility with the upcoming releases of Google Chrome, however, as the version that is not working is a BETA version there may be no support for this as yet.

It would however be interesting to see if this issue is replicated by others and if there is a solution available that someone may have found.

Happy Zenning!

Hi, i discovered the same thing today, when i updated Chrome. In the others browsers work fine, like you said.
I have tried some tweaks and hacks but with no result.
The lightbox that you mentioned to work outside off Zen Cart does not relly on MooTools as Zen LightBox.
I will do some more digging to see whats about the Moo tools .JS that Chrome doesnt like or maybe its a bug from Chrome ?

Best regards, Zoli.

Hi,

I have a new site (link below) and I have installed a script which you can see on the right side. Now this is a Java Script. If I remove that java script Light Box works without any problem but script doesn't.

If I keep the script the lightbox breaks and images open in plain white window, which can be seen on the site at the moment.

Any help as to how can I keep both scripts ?

Thanks

Site here ------ http://bit.ly/9flPfh

Bump!!!!

john4803:

Great add-on and got it working on 2 different stores. Cannot get it to work on ezpages, however? I know it says to add the jscript_zen_lightbox.php file to the file in modules>pages but there is no file for the ezpage folders I created? Any ideas? Thanks!

Anyone have any ideas on this? Will this only work on define pages and not simply ez-pages since there does not seem to be a file to place the jscript file in?

Seems that the zen lightbox does not work with all browsers. It does not load the picture, just displays an empty white box with the following browsers I tested:
Opera 9.51
Google Chrome 7.0.517.41

How to correct this? I would think that I have to remove Zen Lightbox if this issue can not be solved.

john4803:

Anyone have any ideas on this? Will this only work on define pages and not simply ez-pages since there does not seem to be a file to place the jscript file in?
The idea should be the same as any other page.... load the script and call to zen_lightbox(url, description, options);

maybe something like..

<?php
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');
?>


  if (ZEN_LIGHTBOX_GALLERY_MODE == 'true' && ZEN_LIGHTBOX_GALLERY_MAIN_IMAGE == 'true') {
    $rel = 'lightbox-g';
  } else {
    $rel = 'lightbox';
  }
?>
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" title="' . addslashes($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
//--></script>

I've used the same idea on other pages on my site...

tlahtine:

Seems that the zen lightbox does not work with all browsers. It does not load the picture, just displays an empty white box with the following browsers I tested:
Opera 9.51
Google Chrome 7.0.517.41

How to correct this? I would think that I have to remove Zen Lightbox if this issue can not be solved.
I guess after Chrome 4 it stop working... until Chrome is fixed, you could add AppleWebKit to the list checking for non-DOM ready browsers.

in... includes\classes\zen_lightbox\autoload_default.php

if (!/android|iphone|ipod|series60|symbian|windows ce|AppleWebKit|blackberry/i.test(navigator.userAgent)) {
    window.addEvent("domready", Slimbox.scanPage);
}
```It works with Opera/9.80 (Windows NT 5.1; U; en) Presto/2.6.30 Version/10.63

IE6-8
Firefox Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

davewest:

The idea should be the same as any other page.... load the script and call to zen_lightbox(url, description, options);

Thanks Dave but I'm not sure where to put the code? I'm pretty much of a newbie to php! Should there be a file for the ez-pages I'm trying to call to? I read somewhere that they are taken care of in the data base tables? I have searched all of the zen cart files and can't find them so far?:shocking:

Thanks for your patience!:cry:

tlahtine:

Seems that the zen lightbox does not work with all browsers. It does not load the picture, just displays an empty white box with the following browsers I tested:
Opera 9.51
Google Chrome 7.0.517.41

How to correct this? I would think that I have to remove Zen Lightbox if this issue can not be solved.I was wrong about Chrome... its Mootools that needs to be upgraded to version 1.3 in zen lightbox.... Chrome wont work with anything lower then 1.3 of Mootools....

john4803:

Thanks Dave but I'm not sure where to put the code? I'm pretty much of a newbie to php! Should there be a file for the ez-pages I'm trying to call to? I read somewhere that they are taken care of in the data base tables? I have searched all of the zen cart files and can't find them so far?:shocking:

Thanks for your patience!:cry:Yes, ezpages are completely in the database... Just before you open or create a new ezpage, change the editor to 'Plain text'. That way you can enter html/php as you create your page.
Slimbox is only activated by the one file in the page folder, you need to place that code at the top of the ezpage. Then call the function at your image locations. Because I don't use ezpages, I'll have to play around with it a bit to see what else slimbox can do...

@john4803

Had to do some searching, thought the page had gone, but found it again here http://code.google.com/p/slimbox/wiki/MooToolsAPI

I've tried both ways and this works best for ez-pages instead of javascript.... should degrade to a popup or new window...

this work on Slinbox 1.71 and full mootools 1.3

On your ez-page do your links with the rel="lightbox" in the links for linghtbox to work...

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>if you want more then one image....
<a href="images/image-1.jpg" rel="lightbox-atomium">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-atomium">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-atomium">image #3</a>Hopefully this helps... I should of searched for this page before now... also, the old Slimbox that came with this mod is not compatible with newer version of Mootools... many of the functions have changed in mootools This is Slimbox 1.71 setup to work as before with zen lightbox mod... you will also need to replace mootools in your template folder with a newer one... I use the full core 1.3 compacted compatible version..
Attachment #8309

Dave West -
I am having a similar problem to ZeeRocK's .

Maybe an answer to mine would be an answer to his somehow...

I want to put a zen lightbox effect into my banner sidebox. I want to be able to click the image in the sidebox and have it open a larger image.

I can do that successfully if I put the jscript_zen_lightbox.php file into the includes/modules/pages/index folder.

BUT putting that jscript into the index folder causes an advanced product filter add on to not function in my tpl_index_product_list.php file.

So I've been trying to put the following into the bannerbox file somehow but dont know where to put it:

if (ZEN_LIGHTBOX_GALLERY_MODE == 'true' && ZEN_LIGHTBOX_GALLERY_MAIN_IMAGE == 'true') {
$rel = 'lightbox-g';
} else {
$rel = 'lightbox';
}
?>

Any help is much appreciated!

davewest:

I was wrong about Chrome... its Mootools that needs to be upgraded to version 1.3 in zen lightbox.... Chrome wont work with anything lower then 1.3 of Mootools....

How do you upgrade to version 1.3 of Mootools in Zen Lightbox? Please help...my lightbox hasn't worked since I upgraded to latest version of Chrome...but it works in all other browsers. TIA

UPDATE:

ZeeRock,
try installing fual_slimbox.v0.1.5 . Follow the instructions for Zen Lightbox 1.4 users . I have ZL 1.5 but it worked fine for me.

My jscript problem disappeared with the installation.

Note:
I had to remove the ZL css in order for the styling to look right in the new fual pop up windows.

Hope it works for you! I've been banging my head on this --what should have been a very simple --thing for days.

I also noticed this Chrome7 problem.

Where's the problem? Why it doesn't work?

Is this ZL still developed or we should migrate to alternative?

the.rampage.rado:

I also noticed this Chrome7 problem.

Where's the problem? Why it doesn't work?

Is this ZL still developed or we should migrate to alternative?

I just successfully upgraded my zen lightbox by opening the slimbox.php file and upgrading the slimbox code to slimbox version 2 for jQuery rather than MooTools. I'll get a link up for the fix as soon as i've tested that the lightbox options are working (i think they are just don't want to pass on lousy code). My Chrome 7 issues is now gone though. :clap:

Sethaholic:

How do you upgrade to version 1.3 of Mootools in Zen Lightbox? Please help...my lightbox hasn't worked since I upgraded to latest version of Chrome...but it works in all other browsers. TIA
Go to Mootools web site, download 1.3 compacted, rename it to something like 'jscript_mootools-1.3.js' replace mootools in your template jscript folder... download the zip I uploaded some posts back, unzip and replace the one in \includes\classes\zen_lightbox\slimbox.php and that should do it...

Friedrich72:

UPDATE:

ZeeRock,
try installing fual_slimbox.v0.1.5 . Follow the instructions for Zen Lightbox 1.4 users . I have ZL 1.5 but it worked fine for me.

My jscript problem disappeared with the installation.

Note:
I had to remove the ZL css in order for the styling to look right in the new fual pop up windows.

Hope it works for you! I've been banging my head on this --what should have been a very simple --thing for days.Fuel had a even older version of Slimbox then zen lightbox did.... not sure if it was updated...

mteipe:

I just successfully upgraded my zen lightbox by opening the slimbox.php file and upgrading the slimbox code to slimbox version 2 for jQuery rather than MooTools. I'll get a link up for the fix as soon as i've tested that the lightbox options are working (i think they are just don't want to pass on lousy code). My Chrome 7 issues is now gone though. :clap:Slimbox 2 works grate with the jquery library... same thing, edit the slimbox.php to do the jquery calls using the php coding like before and all should work the same.... I have other scripts using the mootools library is why I'll stay with it...

davewest:

Go to Mootools web site, download 1.3 compacted, rename it to something like 'jscript_mootools-1.3.js' replace mootools in your template jscript folder... download the zip I uploaded some posts back, unzip and replace the one in \includes\classes\zen_lightbox\slimbox.php and that should do it....

Awesome!! It worked! Many thanks, as it was driving me nuts.