Zen Lightbox addon [Support Thread]

[boylan]

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"

- the apostrophe could throw off the document.write, correct?

[boylan]

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.

[Alex Clarke]

Ok, I'm a bit lost now.

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

[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.

[macson]

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

[oceano]

Very nice mod!! THanks so much -

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

[Alex Clarke]

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.

[mrmeech]

I am having the same issue and have been unsuccessful in finding a solution, nor have i seen one posted on this thread... any help anyone?

Very nice mod!! THanks so much -

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