Zen Lightbox addon [Support Thread]

[SilverZulu]

Hi Alex, thanks for your quick reply. I can confirm that I'm running V1.4 but I found this posting on Lightbox 2's forums;

It doesn't work if I click an image link before the page has finished loading.
The script is activated only after the page has finished loading.

This is pretty much what I expected what was happening. So, this seems to be a feature of the situation and not a specific bug. I'm now stripping out my site stat counter and changing the implementation of the site seal certificate, because I'm not getting rid of Lightbox.

[Alex Clarke]

Hi Alex, thanks for your quick reply. I can confirm that I'm running V1.4 but I found this posting on Lightbox 2's forums;

It doesn't work if I click an image link before the page has finished loading.
The script is activated only after the page has finished loading.

This is pretty much what I expected what was happening. So, this seems to be a feature of the situation and not a specific bug. I'm now stripping out my site stat counter and changing the implementation of the site seal certificate, because I'm not getting rid of Lightbox.

Zen Lightbox is not just Lightbox v2. It also contains various other bits of code, one part which actually prevents the problem that you're describing.

When the page loads, Zen Lightbox runs a small piece of Javascript. This tells the rest of the code to keep the lightbox (with the loading image/rotating animation) on the screen and completely preload the product images when the user clicks to enlarge the image.

Only when the product image has been preloaded (if it hasn't already been loaded) will the script proceed.

This functionality was introduced in v1.4 of Zen Lightbox.

Hopefully all of the above makes some sense!

[gfunk]

I'm getting the following error message when trying to install the sql patch

1136 Column count doesn't match value count at row 1
in:
[INSERT INTO zen_configuration_group VALUES (NULL, 'Zen Lightbox', 'Configure Zen Lightbox options', '1', '1');]
If you were entering information, press the BACK button in your browser and re-check the information you had entered to be sure you left no blank fields.

Hope somebody can help me out here

[dbltoe]

Alex,

Have you been able to determine why Image Handler 2 (latest) dies when used in conjunction with Lightbox 1.4

Same story on 1.3.7, 1.3.7.1, and 1.3.8 using fresh install and both mods.

[Alex Clarke]

Alex,

Have you been able to determine why Image Handler 2 (latest) dies when used in conjunction with Lightbox 1.4

Same story on 1.3.7, 1.3.7.1, and 1.3.8 using fresh install and both mods.

It's always worked fine for me on Zen Cart 1.3.7 and 1.3.7.1. However, several users have reported problems, which I am looking in to.

I've not yet tested Zen Lightbox on Zen Cart 1.3.8, but will be doing so soon.

The additional images code has been upgraded in Zen Cart 1.3.8 so I think I'll need to release a new version of Zen Lightbox soon.

I'll try to get an update out asap, but cannot commit to a date yet.

[SilverZulu]

Zen Lightbox is not just Lightbox v2. It also contains various other bits of code, one part which actually prevents the problem that you're describing.

When the page loads, Zen Lightbox runs a small piece of Javascript. This tells the rest of the code to keep the lightbox (with the loading image/rotating animation) on the screen and completely preload the product images when the user clicks to enlarge the image.

Only when the product image has been preloaded (if it hasn't already been loaded) will the script proceed.

This functionality was introduced in v1.4 of Zen Lightbox.

Hopefully all of the above makes some sense!

Again, thanks for your reply. I understand what you are saying here but I can assure you that I get this problem with the latest version of Lightbox on 3 different browser versions (IE6, IE7 & FF2) and tested on 2 different computers using multiple sites running the latest version of Lightbox. Also, I believe that the reason why this is happening is because the script has not started executing when the user clicks on the image. If the script does not have time to start, then it will not help to put in these types of preventative measures. Does the script not start after it receives a 'page loaded' event? (What I can make out from the code, the init() function is called when the page loaded event occurs. As seen by the DOMContentLoaded, window.onload = init etc commands in lightbox_lightningload.js) These events are only triggered after the page loaded event has occured. Thus if the user clicks before this event, a blank page is displayed.

I believe that the only way to solve this is to include a javascript call in the images anchor tag (with this script coded within the pages <head> tags). So when the user clicks on the image, this script is run. This script will either;

• process the lightbox functionality if the page loaded event has occurred,
• set a timer and wait for the page loaded event to occur. When the event occurs, it will perform the lightbox functionality. If a timeout occurs, the image is displayed on a blank page or popup window.

A possible problem with this solution is that the system might wait to generate a page loaded event while this script is running.

I did look into disabling the mouse while the page was being loaded but this only works with IE. Looked everywhere to find some example to disable the left mouse button for FF - with no luck.

[Alex Clarke]

Again, thanks for your reply. I understand what you are saying here but I can assure you that I get this problem with the latest version of Lightbox on 3 different browser versions (IE6, IE7 & FF2) and tested on 2 different computers using multiple sites running the latest version of Lightbox. Also, I believe that the reason why this is happening is because the script has not started executing when the user clicks on the image. If the script does not have time to start, then it will not help to put in these types of preventative measures. Does the script not start after it receives a 'page loaded' event? (What I can make out from the code, the init() function is called when the page loaded event occurs. As seen by the DOMContentLoaded, window.onload = init etc commands in lightbox_lightningload.js) These events are only triggered after the page loaded event has occured. Thus if the user clicks before this event, a blank page is displayed.

I believe that the only way to solve this is to include a javascript call in the images anchor tag (with this script coded within the pages <head> tags). So when the user clicks on the image, this script is run. This script will either;

• process the lightbox functionality if the page loaded event has occurred,
• set a timer and wait for the page loaded event to occur. When the event occurs, it will perform the lightbox functionality. If a timeout occurs, the image is displayed on a blank page or popup window.

A possible problem with this solution is that the system might wait to generate a page loaded event while this script is running.

I did look into disabling the mouse while the page was being loaded but this only works with IE. Looked everywhere to find some example to disable the left mouse button for FF - with no luck.

I understand what you're saying. The lightbox_lightningload.js script will not let the lightbox proceed unless the image(s) have been loaded.

However, if this file is not loaded and the user clicks on the image(s) (as you've described) we have a problem. I beleive this will be the case for most people with slow Internet connections or people running Zen Cart on slow servers.

I'll have a look for a solution and see ifI can come up with anything.

Thanks for pointing this out. :)

[banswidthjunkie]

Has anyone managed to successfully run the .js scripts through dean edward's js packer http://dean.edwards.name/packer/ ? They are pretty weighty files so it would be a real bonus if they could be compressed. I have given it a go, but his packer is very funny about semi colons (apparently one can be rather lax about them in js) and I don't know anything about js, so I'm not really sure what the correct syntax should be.

Anyway I found a pre packed lightbox, but it didn't work properly...

Any ideas?

[banswidthjunkie]

I understand what you're saying. The lightbox_lightningload.js script will not let the lightbox proceed unless the image(s) have been loaded.

However, if this file is not loaded and the user clicks on the image(s) (as you've described) we have a problem. I beleive this will be the case for most people with slow Internet connections or people running Zen Cart on slow servers.

I'll have a look for a solution and see ifI can come up with anything.

Thanks for pointing this out. :)

This isn't a double post. I a pretty sure that all you need to do is change the 'onload' event to 'domready' That will transform the links basically as soon as they are accessible by the user: http://demos.mootools.net/DomReadyVS.Load

Whatever you do don't disable the mouse!!!!!

[SilverZulu]

This isn't a double post. I a pretty sure that all you need to do is change the 'onload' event to 'domready' That will transform the links basically as soon as they are accessible by the user: http://demos.mootools.net/DomReadyVS.Load

Whatever you do don't disable the mouse!!!!!

I believe that Alex is using the DOM functionality but this does not matter with slow internet connections as the page is rendered as the browser receives the html. Thus when the place holder for the anchor tag is rendered, the user can click on it, this being before the DOM event has occurred. I know that this is an extreme case but as explained in a previous post, my page was referencing a security seal and a site meter count. Only when these were loaded, did the DOM event occur (sometimes taking more than 5 seconds to load). I've since removed these from the product details page which has improved things.