Zen Colorbox

Support thread for Zen Colorbox plugin.

**deleted**

Got it installed.. Very nice.. Got something odd happening though.. In fact I noticed this too with the latest version of Zen Lightbox.. I get an "extra" image that is a repeat of the main image. So if you look at my test store where I have no additional images you will see that the lightbox always shows that there are two images, and both images are the main image. http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=1&products_id=1

I noticed the same behavior using the latest version of Zen Lightbox as well: http://mybeautyaddiction(dot)com/index.php?main_page=product_info&cPath=16_132&products_id=557

glad to hear it's working well for you. I looked at the site and the "Extra" image is coming from your reviews tab, but the css is hiding it from display.
Is there a ZC setting to "include images in reviews" or something like that?

niestudio:

glad to hear it's working well for you. I looked at the site and the "Extra" image is coming from your reviews tab, but the css is hiding it from display.
Is there a ZC setting to "include images in reviews" or something like that?

No there is no such setting in Tabbed Products Pro.. If I turn off the TPP setting to put the product reviews into a tab, then the extra image goes away..

I'm wondering if the fix I made here: http://www.zen-cart.com/showthread.php?86201-Tabbed-Products-Pro-(TPP)-Contrib-Official-Thread&p=620411#post620411 to hide the extra reviews button somehow has affected things.. I would hate to not be able to keep reviews inside a tab just to use this add-on..:(

I'll look into it an see what I can find.

d

niestudio:

I'll look into it an see what I can find.

d

You are a doll..:smile: I think this is gonna be my go to lightbox on a go forward.. Seems so much cleaner and lighter (pardon the pun:laugh:) than Zen Lightbox (which I still love..)

DivaVocals:

Got it installed.. Very nice.. Got something odd happening though.. In fact I noticed this too with the latest version of Zen Lightbox.. I get an "extra" image that is a repeat of the main image. So if you look at my test store where I have no additional images you will see that the lightbox always shows that there are two images, and both images are the main image. http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=1&products_id=1

I noticed the same behavior using the latest version of Zen Lightbox as well: http://mybeautyaddiction(dot)com/index.php?main_page=product_info&cPath=16_132&products_id=557

One more thing I noticed on this site is that the bottom of the image is getting cut off slightly http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=1&products_id=1

I'm assuming I need to make an adjustment to the stylesheet, but I am not sure what I need to adjust..

DivaVocals:

One more thing I noticed on this site is that the bottom of the image is getting cut off slightly http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=product_info&cPath=1&products_id=1

I'm assuming I need to make an adjustment to the stylesheet, but I am not sure what I need to adjust..

Nevermind.. found it..

Changed this:

        #cboxLoadedContent{margin-bottom:28px;}

to this:

        #cboxLoadedContent{margin-bottom:40px;}

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

I'm very happy with the results as well and thank you very much, niestudio.
Am also using to display a random slideshow of all products on a e-zpage and would like to share method.

Added following code to /includes/templates/MY_TEMPLATE/templates/tpl_page_default.php

IMMEDIATELY FOLLOWING:
<h1 id="ezPagesHeading"><?php echo $var_pageDetails->fields['pages_title']; ?></h1>

<?php
/*Sequence for listing image paths for slideshow */
// do we want slideshow on this page?
if (isset($ezpage_id) and $ezpage_id == 'MY_EZ_PAGE_ID_#'){
		//Hidden div to feed invisible images to jscript
		echo "<div style=\"display:none\">";
			 // query database table for image paths
		$this_sql_for_images = mysql_query("SELECT products_image FROM zen_products ORDER BY RAND()"); 
			// loop through image paths and create array    
		while ($row = mysql_fetch_array($this_sql_for_images, MYSQL_NUM)) {
			//assign string to variable
			$the_url = $row[0]; 
			if (file_exists("images/".$the_url)) {
				// RegEx pattern to separate image path from extension
				$pattern = '|(^.*)\.(.*)|';
				//insert "_LRG" in image name so we are displaying large images
				$replacement = '$1'."_LRG.".'$2';
				//assemble path for large image
				$LRG_URL =  preg_replace($pattern, $replacement, $the_url);
				$full_path = "images/large/".$LRG_URL;
					if (file_exists($full_path)) {
					//echo "The large file $full_path exists<hr/>";
						//list images with "style = display:none" so they are not visible on page
				   echo "<a href= \"".$full_path."\""." rel=\"renmanimage\"><img src=\"".$full_path."\" style=\"display:none;padding:0;margin:0;height:1px\"></a><br/>";
					}
				} else {
					//echo "The small file,  $the_url exists<hr/>";	
					//list images with "style = display:none" so they are not visible on page
				   echo "<a href= \"images/".$the_url."\""." rel=\"renmanimage\"><img src=\"images/".$the_url."\" style=\"display:none;padding:0;margin:0;height:1px\"></a><br/>";
					} // End LRG file condition
		} // End DB file exists Condition
		//End hidden div tag
	echo "</div>";
	//display image to click to begin slideshow
	echo "<a href= \"images/clickhere.jpg\" rel=\"renmanimage\"><img src=\"images/clickhere.jpg\"></a><br/>";
} // End EZ Page ID Condition
?>

Haven't tackled body_onload yet, but tentatively planning on it.
Would also like to have main/trigger image excluded from slideshow, WHILE keeping main images from product pages in slideshow.
If body_onload works this may be less of an issue.

I'm very happy with the results as well and thank you very much, niestudio.
Am also using to display a random slideshow of all products on a e-zpage and would like to share method.

Added following code to /includes/templates/MY_TEMPLATE/templates/tpl_page_default.php

IMMEDIATELY FOLLOWING:
<h1 id="ezPagesHeading"><?php echo $var_pageDetails->fields['pages_title']; ?></h1>

<?php
/*Sequence for listing image paths for slideshow */
// do we want slideshow on this page?
if (isset($ezpage_id) and $ezpage_id == 'MY_EZ_PAGE_ID_#'){
		//Hidden div to feed invisible images to jscript
		echo "<div style=\"display:none\">";
			 // query database table for image paths
		$this_sql_for_images = mysql_query("SELECT products_image FROM zen_products ORDER BY RAND()"); 
			// loop through image paths and create array    
		while ($row = mysql_fetch_array($this_sql_for_images, MYSQL_NUM)) {
			//assign string to variable
			$the_url = $row[0]; 
			if (file_exists("images/".$the_url)) {
				// RegEx pattern to separate image path from extension
				$pattern = '|(^.*)\.(.*)|';
				//insert "_LRG" in image name so we are displaying large images
				$replacement = '$1'."_LRG.".'$2';
				//assemble path for large image
				$LRG_URL =  preg_replace($pattern, $replacement, $the_url);
				$full_path = "images/large/".$LRG_URL;
					if (file_exists($full_path)) {
					//echo "The large file $full_path exists<hr/>";
						//list images with "style = display:none" so they are not visible on page
				   echo "<a href= \"".$full_path."\""." rel=\"renmanimage\"><img src=\"".$full_path."\" style=\"display:none;padding:0;margin:0;height:1px\"></a><br/>";
					}
				} else {
					//echo "The small file,  $the_url exists<hr/>";	
					//list images with "style = display:none" so they are not visible on page
				   echo "<a href= \"images/".$the_url."\""." rel=\"renmanimage\"><img src=\"images/".$the_url."\" style=\"display:none;padding:0;margin:0;height:1px\"></a><br/>";
					} // End LRG file condition
		} // End DB file exists Condition
		//End hidden div tag
	echo "</div>";
	//display image - which will need to be uploaded - to click to begin slideshow
	echo "<a href= \"images/clickhere.jpg\" rel=\"renmanimage\"><img src=\"images/clickhere.jpg\"></a><br/>";
} // End EZ Page ID Condition
?>

Haven't tackled body_onload yet, but tentatively planning on it.
Would also like to have main/trigger image excluded from slideshow, WHILE keeping main images from product pages in slideshow.
If body_onload works this may be less of an issue.

Am always open to suggestions on improving code. Am thinking of ultimately adding features for use on Category listing pages.

Previous post made to work with Image Manager LRG images where they exist. If image manager is not in use, this should do the trick:

<?php
/*Sequence for listing image paths for slideshow */
// do we want slideshow on this page?
if (isset($ezpage_id) and $ezpage_id == 'MY_EZ_PAGE_ID_#'){
		//Hidden div to feed invisible images to jscript
		echo "<div style=\"display:none\">";
			 // query database table for image paths
		$this_sql_for_images = mysql_query("SELECT products_image FROM zen_products ORDER BY RAND()"); 
			// loop through image paths and create array    
		while ($row = mysql_fetch_array($this_sql_for_images, MYSQL_NUM)) {
			//assign string to variable
			$the_url = $row[0]; 
			if (file_exists("images/".$the_url)) {
					//list images with "style = display:none" so they are not visible on page
		} // End DB file exists Condition
		//End hidden div tag
	echo "</div>";
	//display image - which will need to be uploaded - to click to begin slideshow
	echo "<a href= \"images/clickhere.jpg\" rel=\"renmanimage\"><img src=\"images/clickhere.jpg\"></a><br/>";
} // End EZ Page ID Condition
?>

http://www.zen-cart.com/downloads.php?do=file&id=1322

Is this the same mod as at link above?

No, we're still in private beta right now.
that one is a similar box, but doesn't have the same configurations.

I guess this is it:

http://www.webdivision.prommart.com/zencart-demo/index.php?main_page=product_info&cPath=65_66&products_id=195

Looks to be working.

Is the ://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js in html_header necessary? It gives a validation error and seems to work without it.

And I see that it watermarks first large image but not additional images? Not a deal breaker.

Nice look and more interesting than the old stand-by Lightbox. (which I couldn't get sql patch to install 1.5 even directly in phpmyadmin)

niestudio:

No, we're still in private beta right now.
that one is a similar box, but doesn't have the same configurations.

Oh, okay. Looks like I just got the old one going on my demo site in post above. Will also keep eye out for yours. Will it watermark all large images?

No, no plans for watermarking

niestudio:

No, no plans for watermarking

Fantastic, this will ensure that it will not bump heads with add-ons like Image Handler which does watermark images.. BTW, this works BEAUTIFULLY with IH4!!

DivaVocals:

No there is no such setting in Tabbed Products Pro.. If I turn off the TPP setting to put the product reviews into a tab, then the extra image goes away..

I'm wondering if the fix I made here: http://www.zen-cart.com/showthread.php?86201-Tabbed-Products-Pro-(TPP)-Contrib-Official-Thread&p=620411#post620411 to hide the extra reviews button somehow has affected things.. I would hate to not be able to keep reviews inside a tab just to use this add-on..:(

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