Zen Colorbox

[DivaVocals]

finally got around to a workaround for this issue.
Not sure if it should be part of the ZCB or ZLB install by default, but maybe in the FAQ of this and of the tabbed plugin.
try adding this line to [includes/classes/zen_colorbox/autoload_default.php]
I added it as the first line inside of the document ready function

$('#productMainImageReview, #productAdditionalImages_tab').find("a").removeAttr("rel");

this should re-write the image links inside the tabbed sections to remove the rel="colorbox" attribute so that the images do not get linked/loaded into colorbox or lightbox (same code will work for either)

d

Interesting.. but TPP gives an option of putting the additional images inside a tab.. If I make this change won't that mean that if I have my additional images inside a tab that the colorbox/lightbox effect will not be applied to my additional images?? My issue is that if I turn on the reviews tab so that all my product reviews appear in a tab, I then get some kind of extra image.. If I turn of the reviews tab, this behavior stops..

[niestudio]

Interesting.. but TPP gives an option of putting the additional images inside a tab.. If I make this change won't that mean that if I have my additional images inside a tab that the colorbox/lightbox effect will not be applied to my additional images?? My issue is that if I turn on the reviews tab so that all my product reviews appear in a tab, I then get some kind of extra image.. If I turn of the reviews tab, this behavior stops..

Yes, I suppose it would.
I didn't test all the features of the tab, just the review setting and then I noticed that I had doubles of all my additional images too.

if you just want to take care of the review image then you could modify the code to:

$('#productMainImageReview').find("a").removeAttr("rel");

and later if you have an issue like I saw with the additional image, it could be wrapped in an if statement to check wether or no the additional images are in a tab or not.

[DivaVocals]

So I am back with more issue regarding product images and product reviews.. I think the issue I reported previously regarding the images and reviews may not be related to TPP at all.. I think the issues with having reviews on the tabs in TPP is caused because of an overall issue with how Colorbox (and Zen Lightbox) display/deal with reviews and product images together in general.

I reported this new find in the Zen Lightbox thread, but I'm reporting here too since I am seeing the SAME issue with both Colorbox and Zen Lightbox.

Not sure why, but the Lightbox and Colorbox add-ons are generating some weird/invalid HTML on the product reviews pages. You will see the model number appear in what appears to be some weird link to the left of the product image. Using Zen Lightbox, you can see what I am speaking of on this page:
http://clientlaserdiscvault(dot)overthehillweb(dot)com/index.php?main_page=product_reviews&products_id=8909


I found the EXACT same issue with the beta version of the Colorbox add-on as well. You can see the same issue using the Colorbox add-on on this page:
http://clienthairisle(dot)overthehillweb(dot)com/Hair-Extensions/Economy-Collection/Economy-Unprocessed/Indian-Remy-Micro-Thin-Machine-Weft-Virgin-Curly-Texture-3-Oz/reviews?number_of_uploads=0&

This weird link goes away when I turn off Lightbox or Colorbox.

Without Lightbox turned on this is the HTML created:

<div id="productReviewsDefaultProductImage" class="centeredContent back">  
<div id="productMainImage" class="centeredContent back"> 
<script language="javascript" type="text/javascript">
<!-- document.write('<a href="javascript:popupWindow(\'http://myclient.com/index.php?main_page=popup_image&amp;pID=8909\')"><img  src="images/dasPic_24141.jpg" alt="National Geographic - Secrets of the  Titanic [G52000]" title=" National Geographic - Secrets of the Titanic  [G52000] " width="349" height="350" />
<br /><span class="imgLink">larger image</span></a>'); //-->
</script> 
<noscript> 
<a  href="http://myclient.com/index.php?main_page=popup_image&amp;pID=8909"  target="_blank"><img src="images/dasPic_24141.jpg" alt="National  Geographic - Secrets of the Titanic [G52000]" title=" National  Geographic - Secrets of the Titanic [G52000] " width="349" height="350"  /><br /><span class="imgLink">larger  image</span></a>
</noscript> 
</div></div>

With Lightbox turned off this is the HTML created (note the mis-behaving HTML created is in red):

<div id="productReviewsDefaultProductImage" class="centeredContent back">  
<div id="productMainImage" class="centeredContent back"> 
<script language="javascript" type="text/javascript">
<!-- document.write('<a href="images/dasPic_24141.jpg"  rel="lightbox-g" title="National Geographic - Secrets of the  Titanic<br /><span  class=\"smallText\">[G52000]</span>"><img  src="images/dasPic_24141.jpg" alt="National Geographic - Secrets of the  Titanic [G52000]" title=" National Geographic - Secrets of the Titanic  [G52000] " width="349" height="350" /><br /><span  class="imgLink">larger image</span></a>'); //-->
</script>
<a href="images/dasPic_24141.jpg" rel="lightbox-g" title="National Geographic - Secrets of the Titanic&lt;br /&gt;&lt;span class=" smalltext"="">[G52000]"&gt;<img src="images/dasPic_24141.jpg" alt="National Geographic - Secrets of the Titanic [G52000]" title=" National Geographic - Secrets of the Titanic [G52000] " height="350" width="349"><br><span class="imgLink">larger image</span></a> 
<noscript> 
<a  href="http://myclient.com/index.php?main_page=popup_image&amp;pID=8909"  target="_blank"><img src="images/dasPic_24141.jpg" alt="National  Geographic - Secrets of the Titanic [G52000]" title=" National  Geographic - Secrets of the Titanic [G52000] " width="349" height="350"  /><br /><span class="imgLink">larger  image</span></a>
</noscript> 
</div></div>

Using either Colorbox or Zen Lightbox, the issue goes away when I turn off these add-ons. It seems clear that there is something with how both of these add-ons deal with product images and reviews that goes awry.

Any thoughts??

[DivaVocals]

Another minor thing I am trying to figure out how to adjust..

On this page http://clienthairisle(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=23_26&products_id=35 the "stop slideshow" text is cut off..

How do I adjust that??

Still haven't figured out what I need to do to fix this.. I don't think this is JUST a stylesheet fix..

[DivaVocals]

Found a temporary solution for the problem with odd HTML on the reviews page I reported earlier. Wanted to share this in both threads since I found the same issue with Zen Lightbox and the Colorbox beta.

In this file: /includes/modules/pages/product_reviews/header_php.php
I made the following change:

Find line #43-44 and replace with the following.

//     $products_name = $review->fields['products_name'] . '<br  /><span class="smallText">[' .  $review->fields['products_model'] . ']</span>';
//  } else {

Basically I am commenting out the code that the Colorbox is mangling which makes the odd/malformed HTML go away. I'm sure the same solution will fix the issue with Zen Lightbox so I'm gonna post this there too..

More information.. Did a little hunting with the Admin Toolbox and I think I know where the part of the store is being hosed is coming from..

/home2/myhost/public_html/myclient/includes/modules/pages/product_reviews/header_php.php

Line #42 : $products_name = $review->fields['products_name'] . '<br /><span class="smallText">[' . $review->fields['products_model'] . ']</span>';

/home2/myhost/public_html/myclient/includes/modules/pages/product_reviews_info/header_php.php

Line #100 : $products_model = '<br /><span class="smallText">[' . $review_info->fields['products_model'] . ']</span>';

/home2/myhost/public_html/myclient/includes/modules/pages/product_reviews_write/header_php.php

Line #119 : $products_model = '<br /><span class="smallText">[' . $product_info->fields['products_model'] . ']</span>';

These were the only files I could related to reviews which has code similar to the code that is getting mangled by the lightbox (specifically the reference to the model number). The write reviews page is probably fine since the I do not see the problem manifest itself there, but you never know.. Dunno if this helps narrow things down, but hoping it helps point things in the right direction..

[DivaVocals]

Another minor thing I am trying to figure out how to adjust..

On this page http://clienthairisle(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=23_26&products_id=35 the "stop slideshow" text is cut off..

How do I adjust that??

Still haven't figured out what I need to do to fix this.. I don't think this is JUST a stylesheet fix..

Found this answer too.. Had to mess around with these settings in the "Zen_Colorbox Overrides" section of the Colorbox stylesheet:

I needed to add #cboxLoadedContent to ths section. Then I played with the bottom-margin to make room for the title, current page, and "stop slideshow" link. to adjust the title, current page, and "stop slideshow" link position I have to mess around with the bottom setting for the following IDs
#cboxTitle
#cboxCurrent
#cboxSlideshow

The defaults for these should probably be examined so that adjusting these settings out the box shouldn't be needed for most store owners.

[DivaVocals]

Yes, I suppose it would.
I didn't test all the features of the tab, just the review setting and then I noticed that I had doubles of all my additional images too.

if you just want to take care of the review image then you could modify the code to:

$('#productMainImageReview').find("a").removeAttr("rel");

and later if you have an issue like I saw with the additional image, it could be wrapped in an if statement to check wether or no the additional images are in a tab or not.

Want to understand this change.. Are you saying that applying this change alone will stop the extra image I see when viewing the product images?? (I only see this extra image when my reviews are inside of a tab)

[niestudio]

Want to understand this change.. Are you saying that applying this change alone will stop the extra image I see when viewing the product images?? (I only see this extra image when my reviews are inside of a tab)

The rel tag is how they get grouped together so if you remove the rel attribute from the images that are inside the reviews tab they should no longer get called into the colorbox.

[DivaVocals]

The rel tag is how they get grouped together so if you remove the rel attribute from the images that are inside the reviews tab they should no longer get called into the colorbox.

I will try this.. Based on your explanation I'm thinking that this may solve the original problem I reported..

[DivaVocals]

finally got around to a workaround for this issue.
Not sure if it should be part of the ZCB or ZLB install by default, but maybe in the FAQ of this and of the tabbed plugin.
try adding this line to [includes/classes/zen_colorbox/autoload_default.php]
I added it as the first line inside of the document ready function

$('#productMainImageReview, #productAdditionalImages_tab').find("a").removeAttr("rel");

this should re-write the image links inside the tabbed sections to remove the rel="colorbox" attribute so that the images do not get linked/loaded into colorbox or lightbox (same code will work for either)

d

and here is the corrected class code.. Tested this and it works perfectly..

<?php
/**
 * Zen Colorbox
 *
 * @author niestudio (daniel [dot] niestudio [at] gmail [dot] com)
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: autoload_default.php 2012-04-30 niestudio $
 */
?>
jQuery(function($) {
    $("a[rel^='colorbox']").colorbox({<?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_colorbox/options.php'); ?>});;
    $("#productMainImageReview a").removeAttr("rel");
});
//--></script>

What this change does:
IF you are using TPP and have the reviews tab turned on, this will prevent the reviews page default image from treated like an additional product image and being grouped in with the rest of your product images in the lightbox.

The issue is MUCH MORE obvious when you have a main product image and no additional images.. Because the reviews page image is being treated as an additional image, the net effect is that the lightbox will show 1 of 2 images. (the "second" image being the product reviews page image)