Zen Colorbox

ideasgirl:

I have access to computer and Internet now 3 times a week and I'm ready to do this. At this point what do you need from me?

As stated before the first thing that would be suggested is to validate that the files are in fact where they are supposed to be and that the are also not in places where they should not be? Ie. they should be in the folder path that relates to the template in use where expected, that they are intact and of the current version.

Right now, I do not believe that they are installed where they are supposed to be both from observation and the information reported. Sorry for that, but when able to have the software in place on a system as one might expect with the information given about the problem system, well, if can't reproduce it then it didn't happen right? :)

Yes, I put up three options of the way forward. From a "get 'er done" perspective I'd rather be offered the opportunity to login, do the comparison, get it operating correctly and get out. From a "learning to fish" perspective, well, I need clear communication about what is where, path, data on the line, differences, etc.. in order to understand why the install was not successful and to provide clear direction. There's a big swing from one direction to the other.

Hello mc12345678,

Thanks for the check list, I did as you said and checked over the template path again as there was no error in the logs to say anything had installed or had an issue and sure enough, user error....I'd put the wrong active template path of classic and not responsive_classic when renaming the your_template path structure.

Everything's working perfectly now and the menus installed in the admin/configurations/Zen Colorbox Config and visual confirmation at the top of the admin console all install steps/upgrades were successful.

Thanks again for your help, cheers.

himmon:

Hello mc12345678,

Thanks for the check list, I did as you said and checked over the template path again as there was no error in the logs to say anything had installed or had an issue and sure enough, user error....I'd put the wrong active template path of classic and not responsive_classic when renaming the your_template path structure.

Everything's working perfectly now and the menus installed in the admin/configurations/Zen Colorbox Config and visual confirmation at the top of the admin console all install steps/upgrades were successful.

Thanks again for your help, cheers.
Glad that it works, were able to figure it out, and thank you for reporting back the reason and results.

I just downloaded and installed the latest 2.1.2 version which looks great, except the images weren't resizing on small screens.

I found this code, meant to go at the end of the jquery.colorbox-min.js file in the template folder.

So just wondering if it's an oversight to leave it out? When I add it the images get resized as expected.

 // 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);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

Thanks for this excellent contribution, I have been working on a website upgrade project, and Zen Colorbox is a great visual upgrade from my old site. When applying the SQL patch, I came across a syntax error that I wanted to post here in case it was useful. One term in the query is supposed to be enclosed in quotes I believe, but causes a syntax error if it is not. This is from the zen-colorbox/readme.html file as viewed in a browser (affected area in red):

INSERT INTO `configuration_group` (`configuration_group_title`, `configuration_group_description`, `sort_order`, `visible`) VALUES ('Zen Colorbox', 'Configure Zen Colorbox settings', '0', '1');
          UPDATE `configuration_group` SET `sort_order` = LAST_INSERT_ID() WHERE `configuration_group_id` = LAST_INSERT_ID();
          SELECT @cgi := `configuration_group_id` FROM `configuration_group` WHERE `configuration_group_title` = 'Zen Colorbox';
          INSERT IGNORE INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `date_added`, `use_function`, `set_function`) VALUES
          ('<strong>Zen Colorbox</strong>', '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 /><strong>Default: true</strong>', @cgi, 10, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Zen Colorbox (Update Check)', 'ZEN_COLORBOX_PLUGIN_CHECK', <?php echo SHOW_VERSION_UPDATE_IN_HEADER; ?>, 'Allow version checking if Zen Cart version checking enabled<br/><br/>If false, no version checking performed.<br/>If true, then only if Zen Cart version checking is on:', @cgi, 20, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Overlay Opacity', 'ZEN_COLORBOX_OVERLAY_OPACITY', '0.6', '<br />Controls the transparency of the overlay.<br /><br /><strong>Default: 0.6</strong>', @cgi, 30, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '),
          ('Resize Duration', 'ZEN_COLORBOX_RESIZE_DURATION', '400', '<br />Controls the speed of the image resizing.<br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 400</strong><br />', @cgi, 40, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 50, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 60, NOW(), NULL, 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 /><strong>Default: true</strong>', @cgi, 70, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><strong>Default: false</strong>', @cgi, 80, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Loop', 'ZEN_COLORBOX_LOOP', 'true', '<br />If true, Images will loop in both directions.<br /><br /><strong>Default: true</strong>', @cgi, 90, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('<strong>Slideshow</strong>', 'ZEN_COLORBOX_SLIDESHOW', 'false', '<br />If true, Images will display as a slideshow.<br /><br /><strong>Default: false</strong>', @cgi, 100, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Auto Start', 'ZEN_COLORBOX_SLIDESHOW_AUTO', 'true', '<br />If true, your slideshow will auto start.<br /><br /><strong>Default: true</strong>', @cgi, 110, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Speed', 'ZEN_COLORBOX_SLIDESHOW_SPEED', '2500', '<br />Sets the speed of the slideshow <br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 2500</strong>', @cgi, 120, NOW(), NULL, NULL),
          ('## Slideshow Start Text', 'ZEN_COLORBOX_SLIDESHOW_START_TEXT', 'start slideshow', '<br />Link text to start the slideshow.<br /><br /><strong>Default: start slideshow</strong>', @cgi, 130, NOW(), NULL, NULL),
          ('## Slideshow Stop Text', 'ZEN_COLORBOX_SLIDESHOW_STOP_TEXT', 'stop slideshow', '<br />Link text to stop the slideshow.<br /><br /><strong>Default: stop slideshow</strong>', @cgi, 140, NOW(), NULL, NULL),
          ('<strong>Gallery Mode</strong>', '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 /><strong>Default: true</strong>', @cgi, 150, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: true</strong>', @cgi, 160, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('<strong>EZ-Pages Support</strong>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><strong>Default: true</strong>', @cgi, 170, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: jpg,png,gif</strong><br />', @cgi, 180, NOW(), NULL, NULL);
          INSERT IGNORE INTO `admin_pages` (`page_key` ,`language_key` ,`main_page` ,`page_params` ,`menu_key` ,`display_on_menu` ,`sort_order`)VALUES
          ('configZenColorbox', 'BOX_CONFIGURATION_ZEN_COLORBOX', 'FILENAME_CONFIGURATION', CONCAT('gID=',@cgi), 'configuration', 'Y', @cgi);

INSERT INTO `configuration_group` (`configuration_group_title`, `configuration_group_description`, `sort_order`, `visible`) VALUES ('Zen Colorbox', 'Configure Zen Colorbox settings', '0', '1');
          UPDATE `configuration_group` SET `sort_order` = LAST_INSERT_ID() WHERE `configuration_group_id` = LAST_INSERT_ID();
          SELECT @cgi := `configuration_group_id` FROM `configuration_group` WHERE `configuration_group_title` = 'Zen Colorbox';
          INSERT IGNORE INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `date_added`, `use_function`, `set_function`) VALUES
          ('<strong>Zen Colorbox</strong>', '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 /><strong>Default: true</strong>', @cgi, 10, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Zen Colorbox (Update Check)', 'ZEN_COLORBOX_PLUGIN_CHECK', '<?php echo SHOW_VERSION_UPDATE_IN_HEADER; ?>', 'Allow version checking if Zen Cart version checking enabled<br/><br/>If false, no version checking performed.<br/>If true, then only if Zen Cart version checking is on:', @cgi, 20, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Overlay Opacity', 'ZEN_COLORBOX_OVERLAY_OPACITY', '0.6', '<br />Controls the transparency of the overlay.<br /><br /><strong>Default: 0.6</strong>', @cgi, 30, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '),
          ('Resize Duration', 'ZEN_COLORBOX_RESIZE_DURATION', '400', '<br />Controls the speed of the image resizing.<br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 400</strong><br />', @cgi, 40, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 50, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 60, NOW(), NULL, 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 /><strong>Default: true</strong>', @cgi, 70, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><strong>Default: false</strong>', @cgi, 80, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Loop', 'ZEN_COLORBOX_LOOP', 'true', '<br />If true, Images will loop in both directions.<br /><br /><strong>Default: true</strong>', @cgi, 90, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('<strong>Slideshow</strong>', 'ZEN_COLORBOX_SLIDESHOW', 'false', '<br />If true, Images will display as a slideshow.<br /><br /><strong>Default: false</strong>', @cgi, 100, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Auto Start', 'ZEN_COLORBOX_SLIDESHOW_AUTO', 'true', '<br />If true, your slideshow will auto start.<br /><br /><strong>Default: true</strong>', @cgi, 110, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Speed', 'ZEN_COLORBOX_SLIDESHOW_SPEED', '2500', '<br />Sets the speed of the slideshow <br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 2500</strong>', @cgi, 120, NOW(), NULL, NULL),
          ('## Slideshow Start Text', 'ZEN_COLORBOX_SLIDESHOW_START_TEXT', 'start slideshow', '<br />Link text to start the slideshow.<br /><br /><strong>Default: start slideshow</strong>', @cgi, 130, NOW(), NULL, NULL),
          ('## Slideshow Stop Text', 'ZEN_COLORBOX_SLIDESHOW_STOP_TEXT', 'stop slideshow', '<br />Link text to stop the slideshow.<br /><br /><strong>Default: stop slideshow</strong>', @cgi, 140, NOW(), NULL, NULL),
          ('<strong>Gallery Mode</strong>', '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 /><strong>Default: true</strong>', @cgi, 150, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: true</strong>', @cgi, 160, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('<strong>EZ-Pages Support</strong>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><strong>Default: true</strong>', @cgi, 170, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: jpg,png,gif</strong><br />', @cgi, 180, NOW(), NULL, NULL);
          INSERT IGNORE INTO `admin_pages` (`page_key` ,`language_key` ,`main_page` ,`page_params` ,`menu_key` ,`display_on_menu` ,`sort_order`)VALUES
          ('configZenColorbox', 'BOX_CONFIGURATION_ZEN_COLORBOX', 'FILENAME_CONFIGURATION', CONCAT('gID=',@cgi), 'configuration', 'Y', @cgi);

Thanks again for the excellent contribution!

paul3648:

I just downloaded and installed the latest 2.1.2 version which looks great, except the images weren't resizing on small screens.

I found this code, meant to go at the end of the jquery.colorbox-min.js file in the template folder.

So just wondering if it's an oversight to leave it out? When I add it the images get resized as expected.

// 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);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

Still looking over this with regards to operation, history, etc... I have no recollection of purposefully removing that snippet. I know that some discussion was to use the latest version of the support javascript. Perhaps it is something to be suggested back to that original author.

fbroz:

Thanks for this excellent contribution, I have been working on a website upgrade project, and Zen Colorbox is a great visual upgrade from my old site. When applying the SQL patch, I came across a syntax error that I wanted to post here in case it was useful. One term in the query is supposed to be enclosed in quotes I believe, but causes a syntax error if it is not. This is from the zen-colorbox/readme.html file as viewed in a browser (affected area in red):

INSERT INTO configuration_group (configuration_group_title, configuration_group_description, sort_order, visible) VALUES ('Zen Colorbox', 'Configure Zen Colorbox settings', '0', '1');
UPDATE configuration_group SET sort_order = LAST_INSERT_ID() WHERE configuration_group_id = LAST_INSERT_ID();
SELECT @cgi := configuration_group_id FROM configuration_group WHERE configuration_group_title = 'Zen Colorbox';
INSERT IGNORE INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES
('<strong>Zen Colorbox</strong>', '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 /><strong>Default: true</strong>', @cgi, 10, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('Zen Colorbox (Update Check)', 'ZEN_COLORBOX_PLUGIN_CHECK', <?php echo SHOW_VERSION_UPDATE_IN_HEADER; ?>, 'Allow version checking if Zen Cart version checking enabled<br/><br/>If false, no version checking performed.<br/>If true, then only if Zen Cart version checking is on:', @cgi, 20, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('Overlay Opacity', 'ZEN_COLORBOX_OVERLAY_OPACITY', '0.6', '<br />Controls the transparency of the overlay.<br /><br /><strong>Default: 0.6</strong>', @cgi, 30, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '),
('Resize Duration', 'ZEN_COLORBOX_RESIZE_DURATION', '400', '<br />Controls the speed of the image resizing.<br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 400</strong><br />', @cgi, 40, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 50, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 60, NOW(), NULL, 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 /><strong>Default: true</strong>', @cgi, 70, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
('Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><strong>Default: false</strong>', @cgi, 80, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('Loop', 'ZEN_COLORBOX_LOOP', 'true', '<br />If true, Images will loop in both directions.<br /><br /><strong>Default: true</strong>', @cgi, 90, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('<strong>Slideshow</strong>', 'ZEN_COLORBOX_SLIDESHOW', 'false', '<br />If true, Images will display as a slideshow.<br /><br /><strong>Default: false</strong>', @cgi, 100, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('## Slideshow Auto Start', 'ZEN_COLORBOX_SLIDESHOW_AUTO', 'true', '<br />If true, your slideshow will auto start.<br /><br /><strong>Default: true</strong>', @cgi, 110, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
('## Slideshow Speed', 'ZEN_COLORBOX_SLIDESHOW_SPEED', '2500', '<br />Sets the speed of the slideshow <br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 2500</strong>', @cgi, 120, NOW(), NULL, NULL),
('## Slideshow Start Text', 'ZEN_COLORBOX_SLIDESHOW_START_TEXT', 'start slideshow', '<br />Link text to start the slideshow.<br /><br /><strong>Default: start slideshow</strong>', @cgi, 130, NOW(), NULL, NULL),
('## Slideshow Stop Text', 'ZEN_COLORBOX_SLIDESHOW_STOP_TEXT', 'stop slideshow', '<br />Link text to stop the slideshow.<br /><br /><strong>Default: stop slideshow</strong>', @cgi, 140, NOW(), NULL, NULL),
('<strong>Gallery Mode</strong>', '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 /><strong>Default: true</strong>', @cgi, 150, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
('## 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 /><strong>Default: true</strong>', @cgi, 160, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
('<strong>EZ-Pages Support</strong>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><strong>Default: true</strong>', @cgi, 170, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
('## 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 /><strong>Default: jpg,png,gif</strong><br />', @cgi, 180, NOW(), NULL, NULL);
INSERT IGNORE INTO admin_pages (page_key ,language_key ,main_page ,page_params ,menu_key ,display_on_menu ,sort_order)VALUES
('configZenColorbox', 'BOX_CONFIGURATION_ZEN_COLORBOX', 'FILENAME_CONFIGURATION', CONCAT('gID=',@cgi), 'configuration', 'Y', @cgi);

> 
> ```
INSERT INTO `configuration_group` (`configuration_group_title`, `configuration_group_description`, `sort_order`, `visible`) VALUES ('Zen Colorbox', 'Configure Zen Colorbox settings', '0', '1');
          UPDATE `configuration_group` SET `sort_order` = LAST_INSERT_ID() WHERE `configuration_group_id` = LAST_INSERT_ID();
          SELECT @cgi := `configuration_group_id` FROM `configuration_group` WHERE `configuration_group_title` = 'Zen Colorbox';
          INSERT IGNORE INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `date_added`, `use_function`, `set_function`) VALUES
          ('<strong>Zen Colorbox</strong>', '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 /><strong>Default: true</strong>', @cgi, 10, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Zen Colorbox (Update Check)', 'ZEN_COLORBOX_PLUGIN_CHECK', '<?php echo SHOW_VERSION_UPDATE_IN_HEADER; ?>', 'Allow version checking if Zen Cart version checking enabled<br/><br/>If false, no version checking performed.<br/>If true, then only if Zen Cart version checking is on:', @cgi, 20, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Overlay Opacity', 'ZEN_COLORBOX_OVERLAY_OPACITY', '0.6', '<br />Controls the transparency of the overlay.<br /><br /><strong>Default: 0.6</strong>', @cgi, 30, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''0.1'', ''0.2'', ''0.3'', ''0.4'', ''0.5'', ''0.6'', ''0.7'', ''0.8'', ''0.9'', ''1''), '),
          ('Resize Duration', 'ZEN_COLORBOX_RESIZE_DURATION', '400', '<br />Controls the speed of the image resizing.<br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 400</strong><br />', @cgi, 40, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 50, NOW(), NULL, 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 /><strong>Default: 250</strong><br />', @cgi, 60, NOW(), NULL, 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 /><strong>Default: true</strong>', @cgi, 70, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '<br />If true, the lightbox will close when the overlay is clicked.<br /><br /><strong>Default: false</strong>', @cgi, 80, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('Loop', 'ZEN_COLORBOX_LOOP', 'true', '<br />If true, Images will loop in both directions.<br /><br /><strong>Default: true</strong>', @cgi, 90, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('<strong>Slideshow</strong>', 'ZEN_COLORBOX_SLIDESHOW', 'false', '<br />If true, Images will display as a slideshow.<br /><br /><strong>Default: false</strong>', @cgi, 100, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Auto Start', 'ZEN_COLORBOX_SLIDESHOW_AUTO', 'true', '<br />If true, your slideshow will auto start.<br /><br /><strong>Default: true</strong>', @cgi, 110, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '),
          ('## Slideshow Speed', 'ZEN_COLORBOX_SLIDESHOW_SPEED', '2500', '<br />Sets the speed of the slideshow <br /><br />Note: This value is measured in milliseconds.<br /><br /><strong>Default: 2500</strong>', @cgi, 120, NOW(), NULL, NULL),
          ('## Slideshow Start Text', 'ZEN_COLORBOX_SLIDESHOW_START_TEXT', 'start slideshow', '<br />Link text to start the slideshow.<br /><br /><strong>Default: start slideshow</strong>', @cgi, 130, NOW(), NULL, NULL),
          ('## Slideshow Stop Text', 'ZEN_COLORBOX_SLIDESHOW_STOP_TEXT', 'stop slideshow', '<br />Link text to stop the slideshow.<br /><br /><strong>Default: stop slideshow</strong>', @cgi, 140, NOW(), NULL, NULL),
          ('<strong>Gallery Mode</strong>', '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 /><strong>Default: true</strong>', @cgi, 150, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: true</strong>', @cgi, 160, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('<strong>EZ-Pages Support</strong>', 'ZEN_COLORBOX_EZPAGES', 'true', '<br />If true, the lightbox effect will be used for linked images on all EZ-Pages.<br /><br /><strong>Default: true</strong>', @cgi, 170, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'),
          ('## 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 /><strong>Default: jpg,png,gif</strong><br />', @cgi, 180, NOW(), NULL, NULL);
          INSERT IGNORE INTO `admin_pages` (`page_key` ,`language_key` ,`main_page` ,`page_params` ,`menu_key` ,`display_on_menu` ,`sort_order`)VALUES
          ('configZenColorbox', 'BOX_CONFIGURATION_ZEN_COLORBOX', 'FILENAME_CONFIGURATION', CONCAT('gID=',@cgi), 'configuration', 'Y', @cgi);

Thanks again for the excellent contribution!

Although the auto-installer tends to all of that sql, I agree that because the value to be set there is a text version of true or false that just before and just after the echo of the current setting for the overall store that a single quote be included, although generally speaking it would work as is (typically loosely comparing (==) the text false with a boolean false would be equivalent and not an issue, but a more strict comparison (===) would evaluate that comparison as false), but perhaps not look right when reviewing the settings until they were updated by selection.

Will add/update that in github for distribution in next release.

Hi

On the configuration page there are "initial width", and "initial height", referencing "resize animation", but I don't see it listed, am I missing something? (wouldn't be surprised distracted as I am! )

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.

keneso:

Hi

On the configuration page there are "initial width", and "initial height", referencing "resize animation", but I don't see it listed, am I missing something? (wouldn't be surprised distracted as I am! )

There is no "Resize Animation" setting incorporated, although I guess if the Resize Duration were taken to 0 then it would be as if the animation were disabled...

Not sure where the terminology originated as it was in the original distribution as can be seen at least in the github history. (haven't gone back to the original download(s) to see where that terminology may have been inexplicably added). Thing is with the underlying code, there is a default value provided for initialWidth and initialHeight if one is not provided by the code and there is also a default transition "type". That setting could be made to be 'none' which would disable the transition. So, to technically disable the resize animation, either as described the speed would have to go to 0, the initial image size be that of the image(s) being displayed or another option added to the includes/classes/zen_colorbox/options.php file and (as desired) associated install options. The option would be: transition:"none" to be added into the echo'd string.

See, there are other features available with the colorbox code. The plugin offers a "doorway" to integrating it and tries to simplify the organization of the settings and operation. The "instructions" or settings guidance for colorbox can be found here: http://www.jacklmoore.com/colorbox/.

Could all of those settings and options be implemented/integrated into the plugin, sure... Users could also "pick" and choose general options that they wish to implement and incorporate those into that options file. The real question comes of if the feature(s) provided accomplish the desired/intended goal.

Thank you.

Yes I had already started reading the instructions you linked, and did manage a few changes, wanted to be sure I hadn't missed something.

Not being a coder it's hard to understand all that's going on, i.e. will you please tell me where the inline styles are generated, and if they could be removed, and in case put on css file, and how to change the order of the content (image, title, controls)?

keneso:

Thank you.

Yes I had already started reading the instructions you linked, and did manage a few changes, wanted to be sure I hadn't missed something.

Not being a coder it's hard to understand all that's going on, i.e. will you please tell me where the inline styles are generated, and if they could be removed, and in case put on css file, and how to change the order of the content (image, title, controls)?

Inline content generally is made at the point of the final "output" of the link/content. That said, the best help/answer is obtained through more information. Ie. What website, what specific default content is to be modified, what plugin(s) or other modifications have been made to what file(s) that may be related to the content being modified. Applying css would require ensuring that there is a css "way" to reference it. Specific css files can be generated for specific "conditions" as outlined in the css_readme file found in includes/templates/template_default/css/

As for the other changes, will have to review a little to see what options are available and how to apply them.

Thank you.

Yes I am aware of the css readme file, I meant the generated styles in colorbox

<div id="cboxWrapper" style="height: 352px; width: 404px;">
<div id="cboxTopLeft" style="float: left;">
<div id="cboxTopCenter" style="float: left; width: 400px;">
<div id="cboxTopRight" style="float: left;">
<div id="cboxMiddleLeft" style="float: left; height: 348px;">
<div id="cboxContent" style="float: left; width: 400px; height: 348px;">
<div id="cboxLoadedContent" style="width: 400px; overflow: auto; height: 320px;">

I am using bootstrap, and trying to mimic its modal style, and mostly make the box resize at smaller resolutions, which does not, I have managed to add the responsive image class to the image, but the ones above seem to prevent it.

keneso:

Thank you.

Yes I am aware of the css readme file, I meant the generated styles in colorbox

First off, have you tried applying/adding the content that Paul3648 suggested back a few posts: https://www.zen-cart.com/showthread.php?196446-Zen-Colorbox&p=1339321#post1339321 ?

As for the image generaly, it is supposed to be responsive without additional "work". But it may be that the file included with the plugin is missing the "last" piece for mobile devices. My tests have been with the ZC demo data which means the images are relatively small.

The dimensions that you are seeing are what have been generated by the plugin based on the jquery/javascript. It is the point of the software. Presumably (because I haven't had a chance to test it), the code from the above link will fix the mobile resizing issue.

As to the other css things, the title is basically positioned by the css that has been added by the plugin in the file: includes/templates/YOUR_TEMPLATE/css/stylesheet_zen_colorbox.css

There's a lot of information about such modifications already on the Internet found by searching on say colorbox github relocate title. Or other such changes.

Thank you.

I had read it, but forgot about it, anyhow I added the snip, and it does work if triggered at the smaller size, if you resize it does have a bug, first image does not resize, and will adapt after displaying another image, same when resizing from small to large; I know it is not a frequent use, as if I have a phone, or tablet the issue is not occuring, nevertheless thought to mention it, I also do undesrtand it is the original js, and this is not meant as a criticism, or else, just a FYI.

As per the styling to move the items I am aware of that, just I'd have liked to have control over the "output order".

OT
This is a great work, both original, and its adoption for plugin; nevertheless it's kinda overkill for my needs, and while I will keep playing with it for future use, I will the same play to solve the simple modal as my post where you suggested to look at this.

keneso:

Thank you.

I had read it, but forgot about it, anyhow I added the snip, and it does work if triggered at the smaller size, if you resize it does have a bug, first image does not resize, and will adapt after displaying another image, same when resizing from small to large; I know it is not a frequent use, as if I have a phone, or tablet the issue is not occuring, nevertheless thought to mention it, I also do undesrtand it is the original js, and this is not meant as a criticism, or else, just a FYI.

As per the styling to move the items I am aware of that, just I'd have liked to have control over the "output order".

OT
This is a great work, both original, and its adoption for plugin; nevertheless it's kinda overkill for my needs, and while I will keep playing with it for future use, I will the same play to solve the simple modal as my post where you suggested to look at this.
Not sure I understand the second paragraph. It was my understanding that you wanted to be able to say place or position the title at a location other than the bottom. The css referenced is part of that placement changing say the title "placement" css from bottom: xxxxx to top: yyyyy which allows you control over the placement.

As to the last paragraph, part of why I suggested to look at one or the other plugins was to see what areas/files needed to be adjusted/addressed to modify the code to get a desired outcome either for the main image or the additional images. Yes there is some branching logic to support disabling the plugin, incorporation with other known software, etc..., but if you were to consider the path of just using "the plugin" and drop out all the other possibilities, you should be able to see what changes are needed to enable what option.

Beyond that, don't really want to see you spend a lot of time on something that may not provide as much return on investment as using something existing, unless an overall improvement is being seen. Doubt that is/was taken correctly, but idea is: continue to be creative and find new ways to do things and learn, minimize time on things that offer no value, there diamonds in the rough. :)

paul3648:

I just downloaded and installed the latest 2.1.2 version which looks great, except the images weren't resizing on small screens.

I found this code, meant to go at the end of the jquery.colorbox-min.js file in the template folder.

So just wondering if it's an oversight to leave it out? When I add it the images get resized as expected.

// 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);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

I have taken a look at this as is executed at least from my mobile device. I have one modification to it which I plan to implement by
commenting out the area that provides the problem.

// 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);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

Overall what this does is to execute the resize function of the colorbox code in particular when the device "rotates" so that the image will remain "sized" and the overlay stay in place. 
This portion:

  jQuery.colorbox.resize(/*{width:'90%', height:'90%'}*/);

Though, when it calls a designated width and height or a designated innerWidth and innerHeight, there is a problem seen when zooming in/out on a mobile device.  With the original "width/height" style, the height of the image when zooming in becomes such that can not see any of the image and makes the feature useless.  With "innerWidth/innerHeight" it is possible to zoom in and still see the image (after perhaps a little bit of a screen chase), but when zooming out, the area around the image becomes bigger than original and the text placement shifts, etc... But... Don't do/give anything, and the entire arrangement remains sized right, and that additional "responsiveness" remains present.  So, I will be incorporating the above code with the commented out portion so that at least if one wishes to use what seems like was broken, that they could and see associated formatting.

Regarding making the lightbox responsive and post 224
https://www.zen-cart.com/showthread.php?196446-Zen-Colorbox&p=1339321#post1339321

If the lightbox is opened, then the browser window resized, the lightbox is resized but not the contained image.
If the browser window is resized and then the lightbox is opened, the lightbox and contained image is resized.

I think in the real world that is fine for me.

The previous post about commenting out the 90% stops this from resizing at all, so I'm not sure about that conclusion.

Regarding possible future changes to this plugin.
It is not language-friendly as implemented.
I would suggest that the slideshow start/stop texts are moved out of the admin and into a language file along with new constants to use with the jscript override options in includes/classes/zen_colorbox/options.php
for these texts.

    slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",
        current: "image {current} of {total}",
        previous: "previous",
        next: "next",
        close: "close",
        xhrError: "This content failed to load.",
        imgError: "This image failed to load.",

documentation
The readme is a bit minimal.
I would add links to this thread and a much more prominent mention that the original authors page has a great deal of useful information there.
A note to point out that the jscript plugin offers many options which can be overridden by placing the same parameters/options in this file:
includes/classes/zen_colorbox/options.php

Using zen colorbox 2.x with Responsive Sheffield Blue 2.0

This Picaflor Azul template uses earlier version of colorbox and there are no options to configure on the admin panel. I was unsuccessful updating to Colorbox 2.x. I tried dropping existing Colorbox table from db but template simply put them back.

Eventually, discovered that the template installer: admin/includes/installers/responsive_sheffield_blue/2.0 has a section of code near the bottom of the file that installs the (earlier ver) of Colorbox. I removed that entire section of code then installed Colorbox 2 easy peezy using only the mod files. I did this AFTER I had dropped the db tables, so I don't know if it was necessary part of my success or not.

Other Picaflor templates such as Winchester Black, Winchester Responsive have similar set up so I presume this would work for them too. Other Picaflor templates like Westminster New use Lightbox.

Posted just in case anyone else was interested.

torvista:

Regarding making the lightbox responsive and post 224
https://www.zen-cart.com/showthread.php?196446-Zen-Colorbox&p=1339321#post1339321

If the lightbox is opened, then the browser window resized, the lightbox is resized but not the contained image.
If the browser window is resized and then the lightbox is opened, the lightbox and contained image is resized.

I think in the real world that is fine for me.

The previous post about commenting out the 90% stops this from resizing at all, so I'm not sure about that conclusion.

Having been looking over the code, testing options and further researching outside of the provided documentation (also referenced below), it is apparent that a solution has not been incorporated by the original author, but I am working towards one that provides a better result for the "zoom" possibility and would also improve response when changing the orientation of a device. The previous suggested methods (defining both width AND height) caused the issue I was seeing that on zoom, it was possible that the image "window" height would become so small that there would be no image viewable. The software (as described in the author's instruction) will auto-calculate the height if just the width (or innerWidth) is provided. Regardless, a side effect was that the usage of percentage for either causes the "border" of the colorbox to expand to the edge of the screen and then again shrink when the next image is chosen. This is appears as an unexplained change and doesn't look good. To that end an internal code modification has been identified (most effective is from issue 158 of the github repo for the colorbox software) that will resize the image and colorbox together when such function is called. Some additional work is being done to support the "zoom" (resize without change in window dimensions) to allow a current image to remain at its size while zooming in/out. When the window dimensions change (desktop shrink/expand the window) the entire box will be resized. This change is easy to implement (once all code parts are identified) in the non-minimized jquery code, and the jquery can again be minimized. Some series of this will be provided in the updated plugin with a version number indicating that there were modifications made away from the author's provided code. I'm thinking that perhaps that additional resize on window resize may be a feature controllable in the admin with the default of it auto-resizing on screen size change. Me personally, when I'm on a desktop and shrink the window to make space to see something else while the image is displayed, I'd rather the image stay the same size so it is easily viewable. But that isn't strictly responsive in nature. Perhaps an option switch could be added for the user to select/control that, but that is just another development feature to consider.

torvista:

Regarding possible future changes to this plugin.
It is not language-friendly as implemented.
I would suggest that the slideshow start/stop texts are moved out of the admin and into a language file along with new constants to use with the jscript override options in includes/classes/zen_colorbox/options.php
for these texts.

    slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",
        current: "image {current} of {total}",
        previous: "previous",
        next: "next",
        close: "close",
        xhrError: "This content failed to load.",
        imgError: "This image failed to load.",

documentation
The readme is a bit minimal.
I would add links to this thread and a much more prominent mention that the original authors page has a great deal of useful information there.
A note to point out that the jscript plugin offers many options which can be overridden by placing the same parameters/options in this file:
includes/classes/zen_colorbox/options.php

Agree that more ZC standard and capability could be incorporated. Thank you for identifying areas of consideration. A lot was done to the files from the previous version to support html validation and some restructuring. Wanted to do more at the time, but also wanted to keep the functionality present and available.

The reference to the author's instruction would likely reduce similar questions in the forum so yes also to be incorporated in the near future.

Thank you.