Zen Lightbox addon [Support Thread]

OK, I've looked into it further and it happens even with the main image sometimes. Code where no image displays at all:

<script language="javascript" type="text/javascript"><!--
document.write('<a href="images/oldimages/DeploymentBracelet.jpg" rel="lightbox[gallery]" title="Soldier's Deployment Bracelet"><img src="bmz_cache/6/605d2413255761b23cdf2bdbe3dfe68f.image.150x75.jpg" alt="Soldier\'s Deployment Bracelet" title=" Soldier\'s Deployment Bracelet " width="150" height="75" /><br /><span class="imgLink">larger image</span></a>');
//--></script>

Code where image displays:

<script language="javascript" type="text/javascript"><!--
document.write('<a href="images/oldimages/SG-T45a.jpg" rel="lightbox[gallery]" title="18th Airborne  Corps Distressed"><img src="bmz_cache/3/3810be10660b1f4fc121fa1424eb0987.image.97x120.jpg" alt="18th Airborne Corps Distressed" title=" 18th Airborne Corps Distressed " width="97" height="120" /><br /><span class="imgLink">larger image</span></a>');
//--></script>

I'm guessing the first code's problem could be the ```
title="Soldier's Deployment Bracelet"

I escaped it:

... rel="lightbox[gallery]" title="Soldier\'s Deployment Bracelet" ...
``` and the image showed up.  So apparently the title tag, which is the product name, needs to be escaped for apostrophes.

Ok, I'm a bit lost now.

Got a link to your site so I can have a peek??

I can't post the link here, Alex, but I PM'd you instructions.

I'll try to explain better:

There are two different problems here and I've fixed them both:

1. If there is an apostrophe in the Product Name (i.e. Peter's Shirt), the code that zen_lightbox puts inside document.write() breaks it. The string to be written starts with a - (' - and continues until it sees the next - ' - which should be at the end. However, if the product name has an apostrophe, it views that as the end of the string - I think.

this is fixed by changing line 16 of tpl_modules_main_product_image.php
from ```
document.write('<?php echo '<a href="' . $products_image_large . '" rel="lightbox[gallery]" title="' . $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>'; ?>');

 to ```
document.write('<?php echo '<a href="' . $products_image_large . '" rel="lightbox[gallery]" 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>'; ?>');

Just add "addslashes()" to the first instance of $products_name in the title tag.

2. It did not work on additional images at all, for reasons similar to the above problem. I have installed Image Handler 2, which puts a function in the onmouseover event - the code for which is hard written into the Image link. This causes a medium image to hover when you mouse over the small image.

The HTML output is below:

      <script language="javascript" type="text/javascript"><!--
document.write('<a href="images/oldimages/OldArmy-Wine_03.jpg" rel="lightbox[gallery]" title="Old Army Tee Shirt-Wine"><img src="bmz_cache/8/8b90f65bad6260af9512af05aecf2ffc.image.64x80.jpg" alt="Old Army Tee Shirt-Wine" title=" Old Army Tee Shirt-Wine " width="64" height="80" style="position:relative" onmouseover="showtrail('bmz_cache/5/574e7d0af96a8d0fa73f529d8b58a04a.image.96x120.jpg','Old Army Tee Shirt-Wine',64,80,96,120,this,0,0,64,80);" onmouseout="hidetrail();"  /><br />larger image</a>');
//--></script>

Putting addslashes() in additional_images.php solves the problem here too - line 93 should now be:```
$script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="' . $products_image_large . '" rel="lightbox[gallery]" title="' . $products_name . '">' . addslashes($thumb_slashes) . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';

So, I don't have a problem anymore, you should probably just add these two fixes to your next release.  Reply back with any questions - I'll keep monitoring the thread.

:smile: Hello Alex,

Did you ever have time to look at the site at http://www.airsofttoday.com/v135? Sure would like to get it working properly with your contribution. Hopefully it isn't something too weird! Thanks

Boylan - That makes perfect sense. Thanks for explaining it. I'll add the fixes to the next release and credit you for it!

Goldwingers - I did look at your site and Boylan (who has posted above in this thread) has found a solutions to the problem!

I'll apply these fixes now and release 1.3 asap (probably by the end of the week - with or without full IH2 support).

Did you get it to work with image handler?

bigjoed:

Did you get it to work with image handler?

Not yet.

I've been tied up with work and other stuff at the moment.

When I've got IH2 support sorted I'll post here. :)

It looks very nice, i want to know as soon as you can have it to work with IH2.
Thanks a lot.
again this looks VERY NICE!!!
I love it.

very cool mod!

but is it possible to make it compatible with zencart 1.26 or 1.27?

thanks,
rogart

rogart:

very cool mod!

but is it possible to make it compatible with zencart 1.26 or 1.27?

thanks,
rogart

Shouldn't be to hard to make it work with old version of ZenCart.

You'll need to look for all the custom code (marked with 'begin zen lightbox' and 'end zen lightbox') and merge that into your current files.

However, I think that the template system in ZenCart was different in the older versions.

I have searched through the threads about the Zen Lightbox mod which by the way is a great mod. I haven't found an answer to my problem though.

The lightbox works with the exception of that in IE it does not go 100% of the width of the screen. It will work in FireFox fine but in IE6 the dark background stops about 20 pixels short on the right.

Has anyone else had this problem? I've checked other sites using this and they all seem fine. It's just my site sample is not working correctly.

Here is a sample:
http://www.centersbiz.com/newsite/index.php?main_page=product_info&products_id=81

The lightbox works but is not 100% to the right. This is only in IE.

TigerOne:

I have searched through the threads about the Zen Lightbox mod which by the way is a great mod. I haven't found an answer to my problem though.

The lightbox works with the exception of that in IE it does not go 100% of the width of the screen. It will work in FireFox fine but in IE6 the dark background stops about 20 pixels short on the right.

Has anyone else had this problem? I've checked other sites using this and they all seem fine. It's just my site sample is not working correctly.

Here is a sample:
http://www.centersbiz.com/newsite/index.php?main_page=product_info&products_id=81

The lightbox works but is not 100% to the right. This is only in IE.

This is probably a css issue. Try setting your padding or margin for the body class to 0px.

Alex Clarke:

This is probably a css issue. Try setting your padding or margin for the body class to 0px.

I added your suggestion but it still did not effect it. There must be some other mod that is affecting this somewhere. The CSS file has not been modified from it's original other than to add the margin and padding as you recommended.

I will keep troubleshooting this because I like the mod but if it is clashing with something else, then I may need to drop it. Below I've listed the other mods that I have added and maybe someone out there has had this same issue.

Layout_Controller
login_box_1.4.1
newsletter_subscribe_v205
order_steps_edition_2
v2.1a_Ty_Package_Tracker
YahooTreeMenu
zen_lightbox_1.2

None of these should have an effect on the CSS for the lightbox mod I don't think.

boylan:

I can't post the link here, Alex, but I PM'd you instructions.

I'll try to explain better:

There are two different problems here and I've fixed them both:

1. If there is an apostrophe in the Product Name (i.e. Peter's Shirt), the code that zen_lightbox puts inside document.write() breaks it. The string to be written starts with a - (' - and continues until it sees the next - ' - which should be at the end. However, if the product name has an apostrophe, it views that as the end of the string - I think.

this is fixed by changing line 16 of tpl_modules_main_product_image.php
from ```
document.write('<?php echo '<a href="' . $products_image_large . '" rel="lightbox[gallery]" title="' . $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>'; ?>');

>  to ```
document.write('<?php echo '<a href="' . $products_image_large . '" rel="lightbox[gallery]" 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>'; ?>');

Just add "addslashes()" to the first instance of $products_name in the title tag.

2. It did not work on additional images at all, for reasons similar to the above problem. I have installed Image Handler 2, which puts a function in the onmouseover event - the code for which is hard written into the Image link. This causes a medium image to hover when you mouse over the small image.

The HTML output is below:

  <script language="javascript" type="text/javascript"><!--

document.write('<a href="images/oldimages/OldArmy-Wine_03.jpg" rel="lightbox[gallery]" title="Old Army Tee Shirt-Wine"><img src="bmz_cache/8/8b90f65bad6260af9512af05aecf2ffc.image.64x80.jpg" alt="Old Army Tee Shirt-Wine" title=" Old Army Tee Shirt-Wine " width="64" height="80" style="position:relative" onmouseover="showtrail('bmz_cache/5/574e7d0af96a8d0fa73f529d8b58a04a.image.96x120.jpg','Old Army Tee Shirt-Wine',64,80,96,120,this,0,0,64,80);" onmouseout="hidetrail();" /><br />larger image</a>');
//--></script>

>  Putting addslashes() in additional_images.php solves the problem here too - line 93 should now be:```
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="' . $products_image_large . '" rel="lightbox[gallery]" title="' . $products_name . '">' . addslashes($thumb_slashes) . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';

So, I don't have a problem anymore, you should probably just add these two fixes to your next release. Reply back with any questions - I'll keep monitoring the thread.

thks, your method can resolve this problem

:D Very nice mod!! THanks so much -

I'm not getting it to work for the music products however....Has anyone else had this issue??:lookaroun

I think that's due to a different template being used for the music products page.

I'll have a look at sorting this out in the next release.

:cool: Thanks!

Any timeline estimates..?

Well... I was planning on releasing version 1.3 as soon as IH2 support is complete. 1.3 would also include various bugs fixes and updates. However, I'm not sure how long it will take to get the IH2 support working correctly.

Hopefully we'll see 1.3 by the end of next week. :)

• cool, not rushing you, just planning things... kind regards /m