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]

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

Found a better solution to this issue..

Issue:
If you have both Tabbed Products Pro, and Colorbox installed AND your products have model numbers defined, the problem outlined above will manifest itself.

To fix this in the includes/modules/pages/product_reviews/header_php.php file replace this:

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

with this:

if (TPP_GLOBAL_ENABLE_TABS == '1') {  
  if (zen_not_null($review->fields['products_model'])) {
    $products_name = $review->fields['products_name'];
  }

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

What this change does:
If you have Tabbed Products Pro and Zen Colorbox installed, the model number field will NOT display on the product reviews page.

I realize this is pretty much a bandaid solution, but coming up with a solution that allows the product model field to display when both TPP and Zen Colorbox are installed and active is over my paygrade to execute. I don't know if the issue is in the TPP code, or the Zen Colorbox code or if a change needs to be made in both. Again, someone smarter than me will need to figure this out. So I am sharing a down and dirty solution that works.

[DivaVocals]

Found a better solution to this issue..

Issue:
If you have both Tabbed Products Pro, and Colorbox installed AND your products have model numbers defined, the problem outlined above will manifest itself.

To fix this in the includes/modules/pages/product_reviews/header_php.php file replace this:

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

with this:

if (TPP_GLOBAL_ENABLE_TABS == '1') {  
  if (zen_not_null($review->fields['products_model'])) {
    $products_name = $review->fields['products_name'];
  }

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

What this change does:
If you have Tabbed Products Pro and Zen Colorbox installed, the model number field will NOT display on the product reviews page.

I realize this is pretty much a bandaid solution, but coming up with a solution that allows the product model field to display when both TPP and Zen Colorbox are installed and active is over my paygrade to execute. I don't know if the issue is in the TPP code, or the Zen Colorbox code or if a change needs to be made in both. Again, someone smarter than me will need to figure this out. So I am sharing a down and dirty solution that works.

Okay.. I think I found it.. The RIGHT answer.. the key to the answer was in the includes/modules/pages/product_reviews_write/header_php.php file..

The includes/modules/pages/product_reviews/header_php.php file was using different code to display the model number. And this code would display the model number incorrectly when Zen Colorbox (or Zen Lightbox) was installed and active..


Here's the correct fix:

in the includes/modules/pages/product_reviews/header_php.php file replace this:

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

with this:

$products_name = $review->fields['products_name'];

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

[chowardart]

Can anyone help? I installed this on one of these new responsive templates but all I can get it to do is open a new window with the main image... Any ideas?

[chowardart]

OOPS! Forgot... ZZ 1.5.1, Go Daddy, using Picaflor Azul's Responsive Apparel Boutique template...

www(dot)rossales(dot)com/rs3

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