Zen Lightbox addon [Support Thread]

So I fixed the issue from my previous post. The problem was that I coppied the files from YOU_TEMPLATE to my tamplate DARKNESS folder. I tried to copy the files to TEMPLATE_DEFAULT and it works, BUT....

:oops:
I have got the IH2 previews, but if I click the main product image or aditional image it does not work. There is no reaction to the mause click.

Sharx:

One more thing....
Can the Lightbox be used on images I use on the "information" pages?

I'm going to answer my own question :P

Yes it can be used on additional pages.
Just copy the code in any of the files in /includes/modules/pages/......
and insert it into the additional page.
Then put rel="lightbox[gallery]" into the image link.

Hope somebody else than me think this is useful... :wink:

barco57:

Possum,
In a word.....NO. I can't imagine the nightmare that would be created if there was a way to disable the "kill" button.

Hi barco57,

I hadn't thought about the possibility of people misusing that option, but now that you point it out, I understand why it's not possible.

I like the idea of setting a close box at the top right of the lightbox. I don't have control over the images that are shown so can't be sure of the sizes, but the code is mine to manage.

Thanks,

Possum.

I've been reading this thread for days (well it feels like it) looking for a solution to a problem that I have. But first let me give my tip on the following. Problem to follow in next post.

I noticed that many users are having problems with displaying multiple images for a product in the LightBox window. I was also looking into this but needed a quick solution for a demo for a client. I also wanted a solution where you could see multiple images of a product only in the LightBox window. I did not want to clutter my product page with additional images of the product. This is solved by just adding 4 lines of code (plus 1 line for each additional image) at the end of your product description in the admin console. Advantages are;

• no complicated file naming convention, and you can use more meaningful names ie. can use - car.jpg, tire.jpg etc,
• images can be stored in any folder and don't have to be in the same folder,
• very quick and easy,
• don't need to display the additional images on the product page but this does not stop you if you do want to display them.

<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript">
<!--document.write('<a href="images/SecondImage.jpg" rel="lightbox[gallery]" title="This is the second image"></a>')
document.write('<a href="images/some_folder/AnotherPicture.jpg" rel="lightbox[gallery]" title="This is the third image"></a>')//--></script>
</div>

I would like to add that I do not have IH installed. Maybe the pros could comment on this method of displaying additional images.

First I want to thank Alex Clarke for maintaining such a high level of support for this thread (and to all other contributors).

I noticed that there are a number of users who have stated that they have this problem. When you click on the image thumb to enlarge it, the browser clears the display and then displays the picture in a new blank window, not in the 'Lightbox window'. Basically what I found was that if the page was still busy loading and you clicked on the thumb before it completed, it would open the image in a new browser window and would not use Lightbox. One could argue that a normal user would not normally do this but I noticed that I had a few seconds delay while my page was refreshing the site certificate seal and stats counter. In this time, a user might click on the image thumb. Especially if he is revisiting the page and just wants to view the product. (This happened in my demo with the client!)

I could emulate this on any site that I found using Lightbox. This was with IE6, IE7 and Firefox 2. Even your site Alex displays this problem. You might need to create some load on your internet connection to see this if you have a reasonably fast connection. Basically by simulating a slow connection, it is easier to see this.

I hope this can point someone in the right direction in solving this great feature.

SilverZulu:

Even your site Alex displays this problem.

Thanks for your comments. My site is currently only running Zen Lightbox v1.3 and not the latest v1.4 release. The latest release should have support for slower Internet connections.

Can you confirm that you are running the latest version of Zen Lightbox on your website?

Also, to everyone with additional images problems, I'll be releasing the next version of Zen Lightbox soon. This should resolve this issue and also introduce some new features.

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.

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.

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! :P

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

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.

:frusty:

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.

:frusty:

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.

Alex Clarke:

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! :P

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.

SilverZulu:

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

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?

Alex Clarke:

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

banswidthjunkie:

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.

SilverZulu:

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.
If that is the problem, then why not just wait for the dom load before displaying the link to the image? Maybe a trasition the pops the image box out of the side of the page.

Yeah I can see that due to the way zencart builds the page, this problem is never going to be resolvable without some little trick.

OK, I think I have a solution for the problem where the browser displays the image in a new window, instead of displaying it with the Lightbox functionality. This can happen on a slow or loaded internet connection and the user clicks on the image before the page has completely loaded.

What I did was to manually call the Lightbox init function once the last anchor tag was loaded. This call was insert after the product description. I created an the override tpl_product_info_display.php and inserted the following code directly after the line '<!--eof Product description -->' (line 128 on my system);

<script language="javascript" type="text/javascript"><!--
initLightbox();
//--></script>

I then removed the loading of lightbox_lightningload.js in product_info/jscript_zen_lightbox.php Just deleted the following line;

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/lightbox_lightningload.js"></script>

Since I only use Lightbox in the product details page, I've left all other references the same. It now works a dream (even on a 56kb dialup connection).

I tried to run the SQL patch and I get the following error:

1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE ' at line 1
in:
[SET @t4=0; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE configuration_group_title= 'Zen Lightbox'; DELETE FROM configuration WHERE configuration_group_id = @t4; DELETE FROM configuration_group WHERE configuration_group_id = @t4; INSERT INTO configuration_group VALUES (NULL, 'Zen Lightbox', 'Configure Zen Lightbox options', '1', '1'); UPDATE configuration_group SET sort_order = last_insert_id() WHERE configuration_group_id = last_insert_id(); SET @t4=0; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE configuration_group_title= 'Zen Lightbox'; INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES (NULL, 'Enable Zen Lightbox?', 'ZEN_LIGHTBOX_STATUS', 'true', '
If true, all product images on the following pages will be displayed within a lightbox:

- document_general_info
- document_product_info
- product_free_shipping_info
- product_info
- product_music_info
- product_reviews
- product_reviews_info
- product_reviews_write

Please note: To completely remove Zen Lightbox you will need to manually delete the installation files.

Default: true', @t4, 1, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Overlay Opacity', 'ZEN_LIGHTBOX_OVERLAY_OPACITY', '0.8', '
Controls the transparency of the overlay.

Default: 0.8', @t4, 2, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '), (NULL, 'Overlay Fade Duration', 'ZEN_LIGHTBOX_OVERLAY_DURATION', '0.2', '
Controls the fade duration of the overlay.

Default: 0.2', @t4, 3, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '), (NULL, 'Enable Resize Animations?', 'ZEN_LIGHTBOX_RESIZE_ANIMATIONS', 'true', '
If true, the lightbox will be animated as it appears on the screen.

Default: true', @t4, 4, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Resize Speed', 'ZEN_LIGHTBOX_RESIZE_SPEED', '7', '
Controls the speed of the image resizing.

(1 = slowest and 10 = fastest)

Default: 7', @t4, 5, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''1'', ''2'', ''3'', ''4'', ''5'', ''6'', ''7'', ''8'', ''9'', ''10''), '), (NULL, 'Border Size', 'ZEN_LIGHTBOX_BORDER_SIZE', '10', '
If you adjust the padding in the CSS file, you will need to update this variable.

Please note: This value is measured in pixels.

Default: 10
', @t4, 6, NOW(), NOW(), NULL, NULL), (NULL, 'Close on Overlay Click?', 'ZEN_LIGHTBOX_CLOSE_OVERLAY', 'false', '
If true, the lightbox will close when the overlay is clicked.

Default: false', @t4, 7, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Hide Flash Objects?', 'ZEN_LIGHTBOX_HIDE_FLASH', 'true', '
If true, all Flash objects will be hidden when the lightbox is displayed.

Default: true', @t4, 8, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'DIV Class to Hide', 'ZEN_LIGHTBOX_HIDE_ME', 'zenLightboxHideMe', '
Any content wrapped in a DIV tag with this class will be hidden when the lightbox is displayed.

Default: zenLightboxHideMe
', @t4, 9, NOW(), NOW(), NULL, NULL);]
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.

any ideas?

rdch:

I tried to run the SQL patch and I get the following error:

1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE ' at line 1
in:
[SET @t4=0; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE configuration_group_title= 'Zen Lightbox'; DELETE FROM configuration WHERE configuration_group_id = @t4; DELETE FROM configuration_group WHERE configuration_group_id = @t4; INSERT INTO configuration_group VALUES (NULL, 'Zen Lightbox', 'Configure Zen Lightbox options', '1', '1'); UPDATE configuration_group SET sort_order = last_insert_id() WHERE configuration_group_id = last_insert_id(); SET @t4=0; SELECT (@t4:=configuration_group_id) as t4 FROM configuration_group WHERE configuration_group_title= 'Zen Lightbox'; INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES (NULL, 'Enable Zen Lightbox?', 'ZEN_LIGHTBOX_STATUS', 'true', '
If true, all product images on the following pages will be displayed within a lightbox:

• document_general_info
• document_product_info
• product_free_shipping_info
• product_info
• product_music_info
• product_reviews
• product_reviews_info
• product_reviews_write

Please note: To completely remove Zen Lightbox you will need to manually delete the installation files.

Default: true', @t4, 1, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Overlay Opacity', 'ZEN_LIGHTBOX_OVERLAY_OPACITY', '0.8', '
Controls the transparency of the overlay.

Default: 0.8', @t4, 2, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '), (NULL, 'Overlay Fade Duration', 'ZEN_LIGHTBOX_OVERLAY_DURATION', '0.2', '
Controls the fade duration of the overlay.

Default: 0.2', @t4, 3, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '), (NULL, 'Enable Resize Animations?', 'ZEN_LIGHTBOX_RESIZE_ANIMATIONS', 'true', '
If true, the lightbox will be animated as it appears on the screen.

Default: true', @t4, 4, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Resize Speed', 'ZEN_LIGHTBOX_RESIZE_SPEED', '7', '
Controls the speed of the image resizing.

(1 = slowest and 10 = fastest)

Default: 7', @t4, 5, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''1'', ''2'', ''3'', ''4'', ''5'', ''6'', ''7'', ''8'', ''9'', ''10''), '), (NULL, 'Border Size', 'ZEN_LIGHTBOX_BORDER_SIZE', '10', '
If you adjust the padding in the CSS file, you will need to update this variable.

Please note: This value is measured in pixels.

Default: 10
', @t4, 6, NOW(), NOW(), NULL, NULL), (NULL, 'Close on Overlay Click?', 'ZEN_LIGHTBOX_CLOSE_OVERLAY', 'false', '
If true, the lightbox will close when the overlay is clicked.

Default: false', @t4, 7, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'Hide Flash Objects?', 'ZEN_LIGHTBOX_HIDE_FLASH', 'true', '
If true, all Flash objects will be hidden when the lightbox is displayed.

Default: true', @t4, 8, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), (NULL, 'DIV Class to Hide', 'ZEN_LIGHTBOX_HIDE_ME', 'zenLightboxHideMe', '
Any content wrapped in a DIV tag with this class will be hidden when the lightbox is displayed.

Default: zenLightboxHideMe
', @t4, 9, NOW(), NOW(), NULL, NULL);]
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.

>  
> any ideas?
 
How did you paste the SQL statements? It looks like some formatting has been applied.
 
Try opening the file with Notepad (or another simple text editor) and then copying the data from there.