Zen Colorbox

pricediscrimination:

Was using Zen Lightbox before. It stopped working after upgrading to 1.5.4, so installed Zen Colorbox.

One feature that was nice in Zen Lightbox was the option to "Close on Image Click". It is possible to do this with Zen Colorbox?

Also, not sure if these are known bugs or just bugs pertaining to my specific installation, but setting "Display Image Counter" to false causes the Colorbox to stop working.
because colorbox can be used for many different things, such as popup contact us form, it would not make sense to close on box click, thus the close button. It does have the option to close on click outside the popup box!

Not sure why you would tun off the 1 of total count... but I see there was an code error in the options.php class killing the script.

in includes/classes/zen_colorbox/options.php file, add "" in the following code

if (ZEN_COLORBOX_COUNTER == 'true') 
{
    echo '"{current} of {total}"'; 
}
else 
{
    echo '""'; 
}

pricediscrimination:

Almost forgot, the colorbox is resizing images to be smaller than they actually are. The point of a lightbox is to show images that are larger than being displayed on the page. What is the best way to go about making the images display as their actual size?
Colorbox animation will snap the image then drop to a size percentage of the screen, a responsive design for small screens. if you have ZC setup to use images correctly, then you should see the larger images... good test is to turn off colorbox and see if it works as expected. Colorbox is not designed to manage image size other then for animation which completes to the actual image size.

So if you have photo.jpg for the thumb, photo_LRG.jpg for the large, then you are on track, if not then you have some work to do.

pricediscrimination:

The point of a lightbox is to show images that are larger than being displayed on the page. What is the best way to go about making the images display as their actual size?

lightbox does NOTHING more than display your large images inside a lightbox.. It does nothing to manage or manipulate image size settings

davewest:

because colorbox can be used for many different things, such as popup contact us form, it would not make sense to close on box click, thus the close button. It does have the option to close on click outside the popup box!
The functionality would be nice, not everyone uses everything the same way. It was a great feature in Zen Lightbox and would be a great feature in this plugin as well.

davewest:

Not sure why you would tun off the 1 of total count... but I see there was an code error in the options.php class killing the script.

in includes/classes/zen_colorbox/options.php file, add "" in the following code

if (ZEN_COLORBOX_COUNTER == 'true')
{
echo '"{current} of {total}"';
}
else
{
echo '""';
}

Thanks for the code! Not everyone wants to Display Image Counter, I guess that's why it's an option. 


> **davewest:**
>
> Colorbox animation will snap the image then drop to a size percentage of the screen, a responsive design for small screens.  if you have ZC setup to use images correctly, then you should see the larger images... good test is to turn off colorbox and see if it works as expected.  Colorbox is not designed to manage image size other then for animation which completes to the actual image size.
> 
> So if you have photo.jpg for the thumb, photo_LRG.jpg for the large, then you are on track, if not then you have some work to do.
Most lightboxes (in Worpress for example) just link to whatever the image URL is that is being clicked, then display it within a lightbox on the same page for easy viewing. This is also how Zen Lightbox worked perfectly. Is Colorbox unable to do that?

DivaVocals:

lightbox does NOTHING more than display your large images inside a lightbox.. It does nothing to manage or manipulate image size settings

Right, it should display the image exactly as the image is. Meaning if the image being linked to is 750 x 750, when clicking the lightbox you should see the full 750 x 750. Colorbox is not showing the full image as it was intended - it resizes them.

pricediscrimination:

Right, it should display the image exactly as the image is. Meaning if the image being linked to is 750 x 750, when clicking the lightbox you should see the full 750 x 750. Colorbox is not showing the full image as it was intended - it resizes them.

and what Dave and I are saying is that's NOT colorbox doing this.. Image sizing is managed with the images settings which Colorbox does NOT modify or manipulate.. Can show you PLENTY of examples to demonstrate this..

davewest:

if you have ZC setup to use images correctly, then you should see the larger images... good test is to turn off colorbox and see if it works as expected. Colorbox is not designed to manage image size other then for animation which completes to the actual image size.

Did you have to make any modifications? I installed Zen Cart, then IH and the Winchester Black template which has Colorbox built in and it is giving IH some problems.

Ben Hewett:

Did you have to make any modifications? I installed Zen Cart, then IH and the Winchester Black template which has Colorbox built in and it is giving IH some problems.

Winchester Black has Zen Lightbox not Zen Colorbox.. You will need to post your issue on the template authors support thread..

According to this search in "developers tool kit" from the Admin panel of Winchester Black Responsive has Color Box.

/home/gators1993/notashamedts.com/store/ben/includes/installers/winchester_black/1_0.php

Line #215 : (NULL, '<b>Zen Colorbox</b>', 'ZEN_COLORBOX_STATUS', 'true', '<br />If true, all product images on the following pages will be displayed within a lightbox:<br /><br />- document_general_info<br />- document_product_info<br />- page (EZ-Pages)<br />- product_free_shipping_info<br />- product_info<br />- product_music_info<br />- product_reviews<br />- product_reviews_info<br />- product_reviews_write<br /><br /><b>Default: true</b>', @cgi, 100, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),

Line #218 : (NULL, 'Initial Width', 'ZEN_COLORBOX_INITIAL_WIDTH', '250', '<br />If Enable Resize Animations is set to true, the lightbox will resize its width from this value to the current image width, when first displayed.<br /><br />Note: This value is measured in pixels.<br /><br /><b>Default: 250</b><br />', @cgi, 103, NOW(), NOW(), NULL, NULL),

Line #219 : (NULL, 'Initial Height', 'ZEN_COLORBOX_INITIAL_HEIGHT', '250', '<br />If Enable Resize Animations is set to true, the lightbox will resize its height from this value to the current image height, when first displayed.<br /><br />Note: This value is measured in pixels.<br /><br /><b>Default: 250</b><br />', @cgi, 104, NOW(), NOW(), NULL, NULL),

Line #220 : (NULL, 'Display Image Counter', 'ZEN_COLORBOX_COUNTER', 'true', '<br />If true, the image counter will be displayed (below the caption of each image) within the lightbox.<br /><br /><b>Default: true</b>', @cgi, 105, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #221 : (NULL, 'Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><b>Default: false</b>', @cgi, 106, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),

Line #228 : (NULL, '<b>Gallery Mode</b>', 'ZEN_COLORBOX_GALLERY_MODE', 'true', '<br />If true, the lightbox will allow additional images to quickly be displayed using previous and next buttons.<br /><br /><b>Default: true</b>', @cgi, 300, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #229 : (NULL, '  Include Main Image in Gallery', 'ZEN_COLORBOX_GALLERY_MAIN_IMAGE', 'true', '<br />If true, the main product image will be included in the lightbox gallery.<br /><br /><b>Default: true</b>', @cgi, 301, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #230 : (NULL, '<b>EZ-Pages Support</b>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><b>Default: true</b>', @cgi, 400, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #231 : (NULL, '  File Types', 'ZEN_COLORBOX_FILE_TYPES', 'jpg,png,gif', '<br />On EZ-Pages, the lightbox effect will be applied to all images with one of the following file types.<br /><br /><b>Default: jpg,png,gif</b><br />', @cgi, 401, NOW(), NOW(), NULL, NULL);");

Also a check of jscript files in the template has a file named jquery.colorbox-min.
This is a quote from the top of that file

/*!
Colorbox v1.4.33 - 2013-10-31
jQuery lightbox and modal window plugin
(c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/

It is a ColorBox issue.

Ben Hewett:

Did you have to make any modifications? I installed Zen Cart, then IH and the Winchester Black template which has Colorbox built in and it is giving IH some problems.

Ben Hewett:

According to this search in "developers tool kit" from the Admin panel of Winchester Black Responsive has Color Box.

/home/gators1993/notashamedts.com/store/ben/includes/installers/winchester_black/1_0.php

Line #215 : (NULL, '<b>Zen Colorbox</b>', 'ZEN_COLORBOX_STATUS', 'true', '<br />If true, all product images on the following pages will be displayed within a lightbox:<br /><br />- document_general_info<br />- document_product_info<br />- page (EZ-Pages)<br />- product_free_shipping_info<br />- product_info<br />- product_music_info<br />- product_reviews<br />- product_reviews_info<br />- product_reviews_write<br /><br /><b>Default: true</b>', @cgi, 100, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),

Line #218 : (NULL, 'Initial Width', 'ZEN_COLORBOX_INITIAL_WIDTH', '250', '<br />If Enable Resize Animations is set to true, the lightbox will resize its width from this value to the current image width, when first displayed.<br /><br />Note: This value is measured in pixels.<br /><br /><b>Default: 250</b><br />', @cgi, 103, NOW(), NOW(), NULL, NULL),

Line #219 : (NULL, 'Initial Height', 'ZEN_COLORBOX_INITIAL_HEIGHT', '250', '<br />If Enable Resize Animations is set to true, the lightbox will resize its height from this value to the current image height, when first displayed.<br /><br />Note: This value is measured in pixels.<br /><br /><b>Default: 250</b><br />', @cgi, 104, NOW(), NOW(), NULL, NULL),

Line #220 : (NULL, 'Display Image Counter', 'ZEN_COLORBOX_COUNTER', 'true', '<br />If true, the image counter will be displayed (below the caption of each image) within the lightbox.<br /><br /><b>Default: true</b>', @cgi, 105, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #221 : (NULL, 'Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><b>Default: false</b>', @cgi, 106, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),

Line #228 : (NULL, '<b>Gallery Mode</b>', 'ZEN_COLORBOX_GALLERY_MODE', 'true', '<br />If true, the lightbox will allow additional images to quickly be displayed using previous and next buttons.<br /><br /><b>Default: true</b>', @cgi, 300, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #229 : (NULL, '  Include Main Image in Gallery', 'ZEN_COLORBOX_GALLERY_MAIN_IMAGE', 'true', '<br />If true, the main product image will be included in the lightbox gallery.<br /><br /><b>Default: true</b>', @cgi, 301, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #230 : (NULL, '<b>EZ-Pages Support</b>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><b>Default: true</b>', @cgi, 400, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),

Line #231 : (NULL, '  File Types', 'ZEN_COLORBOX_FILE_TYPES', 'jpg,png,gif', '<br />On EZ-Pages, the lightbox effect will be applied to all images with one of the following file types.<br /><br /><b>Default: jpg,png,gif</b><br />', @cgi, 401, NOW(), NOW(), NULL, NULL);");

Also a check of jscript files in the template has a file named jquery.colorbox-min.
This is a quote from the top of that file

/*!
Colorbox v1.4.33 - 2013-10-31
jQuery lightbox and modal window plugin
(c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/

It is a ColorBox issue.
"giving IH some problems" doesn't tell us much, but that said, I would still think that it's an issue with your template since Zen Colorbox OUT THE BOX works just fine.. So I would say that there is something amiss with your template.. If you have better information to provide perhaps the community can provide a better answer..

DivaVocals:

and what Dave and I are saying is that's NOT colorbox doing this.. Image sizing is managed with the images settings which Colorbox does NOT modify or manipulate.. Can show you PLENTY of examples to demonstrate this..

It is definitely resizing images. Nothing in zen cart is saying to make an image 745 x 745, yet Colorbox is doing so. Probably due to this:

#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

DivaVocals:

Winchester Black has Zen Lightbox not Zen Colorbox.. You will need to post your issue on the template authors support thread..

No, this is incorrect. Winchester Black has zen colorbox installed.

Thanks,

Anne

pricediscrimination:

It is definitely resizing images. Nothing in zen cart is saying to make an image 745 x 745, yet Colorbox is doing so. Probably due to this:

#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

Again.. NOTHING in the Colorbox CSS or Jasvascript or code RE-SIZES images.. Including the box-sizing. content-box simply tells the browser what to to with the width and height properties.. It does NOT define them..

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

[h=2]CSS Syntax[/h]  box-sizing: content-box|border-box|initial|inherit;

 [h=2]Property Values[/h] [TABLE="class: reference notranslate"]
   [TR]
     [TH]Value[/TH]
     [TH]Description[/TH]
   [/TR]
     [TR]
     [TD] content-box[/TD]
     [TD]Default. The width and height properties (and min/max properties)  	includes only the content. Border, padding, or margin are not included[/TD]
   [/TR]
   [TR]
     [TD] border-box[/TD]
     [TD]The width and height properties (and min/max properties) includes  	content, padding and border, but not the margin[/TD]
   [/TR]
 	[TR]
     [TD]initial[/TD]
     [TD]Sets this property to its default value. [URL="http://www.w3schools.com/cssref/css_initial.asp"]Read about [I]initial[/I][/URL][/TD]
     [/TR]
 	[TR]
     [TD]inherit[/TD]
     [TD]Inherits this property from its parent element. [URL="http://www.w3schools.com/cssref/css_inherit.asp"]Read about [I]inherit[/I][/URL][/TD]
     [/TR]
   [/TABLE]
    [HR][/HR]

Image sizing is managed through Zen Cart admin settings..

Now you can continue to try and insist that Colorbox is doing something it's really NOT doing or you can post some information to help us help you figure out what the actual cause of your issue is.. Post your Admin Configuration image setting are and post a link to your site.. Can't help you any other way at this point..

pricediscrimination:

The functionality would be nice, not everyone uses everything the same way. It was a great feature in Zen Lightbox and would be a great feature in this plugin as well.

and if you want this feature, there's no reason why you can't add it to your own shop

or

submit a contribution to the Zen Colorbox Github repo to add this optional feature..

pricediscrimination:

It is definitely resizing images. Nothing in zen cart is saying to make an image 745 x 745, yet Colorbox is doing so. Probably due to this:

#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

CSS is to resize the box container to match the image....not to resize the image! Like I said before... the responsive design is keeping the lightbox with in the screen size of the device.

The responsive design feather was added to the bottom of the script jquery.colorbox-min.js in the template JavaScript folder... you can change from 95% to 100% or delete the code...

// Begin Make ColorBox responsive
jQuery.colorbox.settings.maxWidth  = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox() {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.resize({width:'90%', height:'90%'});
    }
  }, 300);
}

Keep in mind, where not the coders for colorbox, but work to integrate it into our stores... clicking on the image advances to the next image which is one of the 5 sample layouts you could use.. we would have to work on making a switch so to use image click to close and not advance, something like below... but not high on my list of to do's.

$('a.example').colorbox({onComplete:function(){     $('.cboxPhoto').unbind().click($.colorbox.close); }}) 

I tested the code with an image of 800xp x 600px and it came out the same in colorbox, also tested with an image 120x120 and it was enlarged to meet the 95% of my screen... so for me, it's working as expected on Linux Ub-10.14, firefox36, php5.5, ZC1.5.4... I can't recreate the size problem your getting I have some other things I need to work on, the size is responsive which is what I need..

To help us to help you, we need more info.. OS, explorer, php version, zen cart version, link to the site if it's up, so on... if we can't create the error, we can't fix it! I'm trying to get my site up and running, hoping by the end of this week I should have something up in display mode at least and you can see how I use it.

davewest:

The responsive design feather was added to the bottom of the script jquery.colorbox-min.js in the template JavaScript folder... you can change from 95% to 100% or delete the code...

// Begin Make ColorBox responsive
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.resize({width:'90%', height:'90%'});
}
}, 300);
}

I need to jump in here lest your comment be misunderstood by the OP as some kind of solution.. this code snippet is for responsive design.. Changing it only impacts the resizing of the image CONTAINER not the image.. The OPs issue will NOT be resolved by changing this to 100%..

> **davewest:**
>
> To help us to help you, we need more info.. OS, explorer, php version, zen cart version, link to the site if it's up, so on... if we can't create the error, we can't fix it! I'm trying to get my site up and running, hoping by the end of this week I should have something up in display mode at least and you can see how I use it.Precisely what I said in my last post.. Not gonna GUESS at an issue that I cannot recreate.. The OPs assumption as to the root of his problem is simply not support by the code or usage.. He is in fact gonna have to post something tangible to see to help troubleshot.. otherwise we are all just spitting in the wind here..

Hi,
I have color box installed in both my sites www.acq uatua.it and https://www.m.acq uatua.it
It works nicely and it is responsive, but google says that my mobile site shows images that are too big. see this link https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.m.acquatua.it%2Findex.php%3Fmain_page%3Dpopup_image_additional%26pID%3D611%26pic%3D1%26products_image_large_additional%3Dimages%252Flarge%252Fspillatore_cobra_gold_LRG.png&hl=it&priorityGroup=usability&utm_source=wmx&utm_campaign=wmx_mobilepsi&tab=mobile
I have images that are actually as big as this https://www.m.acq uatua.it/images/large/spillatore_cobra_gold_LRG.png
These images are shown correctly on a smartphone, but once again google complains that the width of the image is too big equal to 611.
I understand that colorbox manages to show the images in a container that adapts itself to the size of the device without resizing them, but how can we tell google that the image is corectly shown even if the size is 600 * 800?
Thanks for your help.
Ciao from Italy.
enzo

enzo-ita:

Hi,
I have color box installed in both my sites www.acq uatua.it and www.m.acq uatua.it
It works nicely and it is responsive, but google says that my mobile site shows images that are too big. see this link https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.m.acquatua.it%2Findex.php%3Fmain_page%3Dpopup_image_additional%26pID%3D611%26pic%3D1%26products_image_large_additional%3Dimages%252Flarge%252Fspillatore_cobra_gold_LRG.png&hl=it&priorityGroup=usability&utm_source=wmx&utm_campaign=wmx_mobilepsi&tab=mobile
I have images that are actually as big as this www.m.acq uatua.it/images/large/spillatore_cobra_gold_LRG.png
These images are shown correctly on a smartphone, but once again google complains that the width of the image is too big equal to 611.
I understand that colorbox manages to show the images in a container that adapts itself to the size of the device without resizing them, but how can we tell google that the image is corectly shown even if the size is 600 * 800?
Thanks for your help.
Ciao from Italy.
enzo

That is more of a general Zen Cart question, not a Colobox support question.. You will need to start a separate post to ask this question.. As stated on the other posts on this page just above yours, this mod does NOTHING to manage, change or otherwise impact image sizes..

I'm working on upgrading a site to ZC 1.5.4. It was using Lightbox and I've replaced it with Color Box. The problem is the additional images. The main image works great. The additional images appear in a pop-up instead of the light box.

http://154 DOT ccui DOT net/Brands/VillagerStoves/VillagerPuffin4kwWoodBurningStove?cPath=180_263_254&

This should work for additional images, right? What might I have missed?

jeking:

I'm working on upgrading a site to ZC 1.5.4. It was using Lightbox and I've replaced it with Color Box. The problem is the additional images. The main image works great. The additional images appear in a pop-up instead of the light box.

http://154 DOT ccui DOT net/Brands/VillagerStoves/VillagerPuffin4kwWoodBurningStove?cPath=180_263_254&

This should work for additional images, right? What might I have missed?yes it will.. you should re-check your installation.. Make sure you have removed ALL remnants of Zen Lightbox..

DivaVocals:

yes it will.. you should re-check your installation.. Make sure you have removed ALL remnants of Zen Lightbox..

Finally had time to get back to this. I missed the included \includes\modules\YOUR_TEMPLATE\additional_images.php Image Handler is also installed and I had that version of this file.