Zen Colorbox

[strelitzia]

I've come across an issue where the "help" content on the shopping cart page doesn't load correctly after installing colorbox.

Tested on the following configuration.
ZC 1.5.7c using responsive classic template

Content correctly displayed in a new window before installing colorbox. Now the colorbox opens but the white content area is only around 30px in height and is empty.

If I inspect element I see

<div id="cboxContent" style="float: left; width: 508px; height: 28px;"><div id="cboxLoadedContent" style="width: 508px; overflow: auto; height: 0px;">

  
  <meta charset="utf-8">
  <title>Zen Cart!, The Art of E-commerce</title>
  <meta name="keywords" content="ecommerce, open source, shop, online shopping, store ">
  <meta name="description" content="Zen Cart! ecommerce, open source, shop, online shopping, store">
  <meta name="author" content="Test Site">
  <meta name="generator" content="shopping cart program by Zen Cart®, https://www.zen-cart.com eCommerce">
  <meta name="robots" content="noindex, nofollow">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">


  <base href="https://testsite.localhost/">
  <link rel="canonical" href="https://testsite.localhost/index.php?main_page=info_shopping_cart">

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/responsive_classic/jscript/jquery.min.js"%3E%3C/script%3E'));</script>
<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/template_default/jscript/jquery.min.js"%3E%3C/script%3E'));</script>

<link rel="stylesheet" type="text/css" media="print" href="includes/templates/responsive_classic/css/print_stylesheet.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/style_imagehover.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_colors.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_css_buttons.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_zen_colorbox.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/info_shopping_cart.css">

<link rel="stylesheet" type="text/css" href="includes/templates/responsive_classic/css/responsive.css"><link rel="stylesheet" type="text/css" href="includes/templates/responsive_classic/css/responsive_default.css">  <script type="text/javascript">document.documentElement.className = 'no-fouc';</script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">




<div>
<h1>Visitors Cart / Members Cart</h1>
<h2>Visitors Cart</h2>
<p>Every visitor to our online shop will be given a 'Visitors Cart'. This allows the visitor to store their products in a temporary shopping cart. Once the visitor leaves the online shop, so will the contents of their shopping cart.</p>
<h2>Members Cart</h2>
<p>Every member to our online shop that logs in is given a 'Members Cart'. This allows the member to add products to their shopping cart, and come back at a later date to finalize their checkout. All products remain in their shopping cart until the member has  checked them out, or removed the products themselves.</p>
<h2>Info</h2>
<p>If a member adds products to their 'Visitors Cart' and decides to log in to the online shop to use their 'Members Cart', the contents of their 'Visitors Cart' will merge with their 'Members Cart' contents automatically.</p>
<p style="display: none;"><a href="javascript:window.close();">[ Close Window ]</a></p>
</div>

</div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left; display: none;"></div><button type="button" id="cboxPrevious" style="display: none;"></button><button type="button" id="cboxNext" style="display: none;"></button><button type="button" id="cboxSlideshow" style="display: none;"></button><div id="cboxLoadingOverlay" style="float: left; display: none;"></div><div id="cboxLoadingGraphic" style="float: left; display: none;"></div><button type="button" id="cboxClose">close</button></div>

so clearly the content is there, but for some reason it isn't being made visible.

Has anyone else had this problem, and any suggestions on how to resolve it?

[strelitzia]

I would assume the lack of content is because of the height being 0px in the first line of the snippet posted above.
I'm guessing that height should be set by the jquery controlling volorbox, but for some reason it isn't happening.

[rlexyd]

I hope you understand the irony in the situation... The desire is to correct an "accessibility" issue, which is being done through a non-accessibility method of sharing information... :)

That said, I was able to reproduce the issue on a "similar" site (responsive classic template with this module installed), and have generated a potential patch for the issue. The patch adds a title to the associated html button(s) which appears should resolve the problem(s) reported by WAVE. The patch can be found at:
https://github.com/mc12345678/zen-co...b5c547d3358eae

Content in red is "deleted" with content in green "added". While the above commit shows an entire line affected, that is because the code had been minified to reduce its overall size. There are four places within that line where information had been added to provide the associated title parameter to the <button /> tags. As this section of code is basically in clear text, the html parameter and associated value could be directly entered without loss of "minification".

Thanks MC,

I really appreciate the help, updating my (/includes/templates/responsive_classic/jscript/jquery.colorbox-min.js ) to your new version on Github fixed the problem, the errors no longer show on WebAIM:)

I'm assuming this part was a typo as it was missing the beginning P from the word Previous.. (<button type="button" title="{revious"/>).

[rlexyd]

It looks as if you have the problems identified in WebAIM solved.
It should be noted that the problem was identified as an empty button which is not fixed by adding a title. The lack of title or label would probably be identified when/if the button had some text. Having an ID for each MAY have eliminated the need for a title or label.

<button type="button" id="cboxPrevious"></button>

is one example and should probably, as a minimum, be

<button type="button" id="cboxPrevious">Previous</button>

The reason they were not seen in the text of the page and were seen by the tool is that the surrounding div was display:none.
display:none does NOT keep some accessibility tools or Search Engines from "seeing the code" that is hidden in the background of your browser.
You'll note that there is no error for not having a H1 tag on your site. However, our (myZencartHost.com) tool catches that the H1 is set to display:none on line 456 of your includes/templates/responsive_classic/css/stylesheet.css and logs a missing H1. A moderate level error. Why is this so? Big differences between what the SEs see and the text-readers see on any site.
Another thing I'll be addressing soon in github is the requirement for language and reading direction in the html tag. Zen Cart and responsive_classic have

<html dir="ltr" lang="en">

showing when you view page source. This is correct (for those using English) but, a couple of the testing tools show violations due to their being missing. I imagine it may be necessary to put that call together differently.
Right now, it's done

<html <?php echo HTML_PARAMS; ?>>

being in YOUR_TEMPLATEs english.php file. The version of the english.php ships with

// Global entries for the <html> tag
  define('HTML_PARAMS','dir="ltr" lang="en"');

so it may just need some tweak to get it in place at the right time for the tools to "see it". Not my area of expertise.

Thank you dbltoe for all the info and for taking the time to check the site with your testing tool :)

[Jeff_Mash]

I installed this on a 1.5.7 website. Looks perfect! Only one question:

On the Admin-side, it constantly is saying "Inserted configuration for Zen Colorbox" and "Installed Zen Colorbox v2.1.2" on top of the screen.

Normally that should go away after it's installed. Did I miss a step or something?

Screenshot:

[Jeff_Mash]

For some reason, when the Colorbox is loading my additional images, those load real small. Any reason why?

The main image is nice and large, but the additional images seem to only be loading the small thumbnails and not the enlarged versions.

Here is an uploaded screenshot: https://i.postimg.cc/8ztC206H/screenshot-197.png

Any idea on what to check? We love the module, but we can't use it if it's not enlarging the additional images correctly.

[Jeff_Mash]

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

On this page http://clienthairisle(dot)overthehil...products_id=35 the "stop slideshow" text is cut off..

How do I adjust that??

I should mention, this DOES WORK if I turn off the Image Handler 5. That will then load the additional images in their larger size. However, we want IH5 because it compresses the images.

Is there anyway to have this Colorbox module work with IH5 so that it loads the additional images in their larger size, and not simply loading the smaller thumbnails?

[simon1066]

For some reason, when the Colorbox is loading my additional images, those load real small. Any reason why?

The main image is nice and large, but the additional images seem to only be loading the small thumbnails and not the enlarged versions.

Here is an uploaded screenshot: https://i.postimg.cc/8ztC206H/screenshot-197.png

Any idea on what to check? We love the module, but we can't use it if it's not enlarging the additional images correctly.

I believe this has to do with the settings for LARGE_IMAGE_WIDTH and LARGE_IMAGE_HEIGHT, start from this post in the IH5 thread and check if you have those defined in your database.

https://www.zen-cart.com/showthread....32#post1378332

[Jeff_Mash]

I believe this has to do with the settings for LARGE_IMAGE_WIDTH and LARGE_IMAGE_HEIGHT, start from this post in the IH5 thread and check if you have those defined in your database.

https://www.zen-cart.com/showthread....32#post1378332

Simon - Thank you for stepping in and trying to help me figure this out. THAT WORKED.

My situation almost seemed identical to that post you referenced. (Those two constant variables did NOT show up under the IH5 configuration, but they DID show up under the Developer Tools search with the smaller values). So I just changed those values to something larger, and now it appears to be working.

[OopsIbrickedIT]

Zen zart 1.5.x Mariadb 10.4

I tried to install Colorbox and everything went fine but when installing SQL patch I got 1064 syntax error:

1064 You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ', 'Allow version checking if Zen ...' at line 1
in:
[INSERT IGNORE INTO zen_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES ('Zen Colorbox', 'ZEN_COLORBOX_STATUS', 'true', '
If true, all product images on the following pages will be displayed within a lightbox:

- document_general_info
- document_product_info
- page (EZ-Pages)
- product_free_shipping_info
- product_info
- product_music_info
- product_reviews
- product_reviews_info
- product_reviews_write

Default: true', @cgi, 10, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), ('Zen Colorbox (Update Check)', 'ZEN_COLORBOX_PLUGIN_CHECK', , 'Allow version checking if Zen Cart version checking enabled

If false, no version checking performed.
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', '
Controls the transparency of the overlay.

Default: 0.6', @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', '
Controls the speed of the image resizing.

Note: This value is measured in milliseconds.

Default: 400
', @cgi, 40, NOW(), NULL, NULL), ('Initial Width', 'ZEN_COLORBOX_INITIAL_WIDTH', '250', '
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.

Note: This value is measured in pixels.

Default: 250
', @cgi, 50, NOW(), NULL, NULL), ('Initial Height', 'ZEN_COLORBOX_INITIAL_HEIGHT', '250', '
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.

Note: This value is measured in pixels.

Default: 250
', @cgi, 60, NOW(), NULL, NULL), ('Display Image Counter', 'ZEN_COLORBOX_COUNTER', 'true', '
If true, the image counter will be displayed (below the caption of each image) within the lightbox.

Default: true', @cgi, 70, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'), ('Close on Overlay Click', 'ZEN_COLORBOX_CLOSE_OVERLAY', 'false', '
If true, the lightbox will close when the overlay is clicked.

Default: false', @cgi, 80, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), ('Loop', 'ZEN_COLORBOX_LOOP', 'true', '
If true, Images will loop in both directions.

Default: true', @cgi, 90, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), ('Slideshow', 'ZEN_COLORBOX_SLIDESHOW', 'false', '
If true, Images will display as a slideshow.

Default: false', @cgi, 100, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), ('  Slideshow Auto Start', 'ZEN_COLORBOX_SLIDESHOW_AUTO', 'true', '
If true, your slideshow will auto start.

Default: true', @cgi, 110, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''), '), ('  Slideshow Speed', 'ZEN_COLORBOX_SLIDESHOW_SPEED', '2500', '
Sets the speed of the slideshow

Note: This value is measured in milliseconds.

Default: 2500', @cgi, 120, NOW(), NULL, NULL), ('  Slideshow Start Text', 'ZEN_COLORBOX_SLIDESHOW_START_TEXT', 'start slideshow', '
Link text to start the slideshow.

Default: start slideshow', @cgi, 130, NOW(), NULL, NULL), ('  Slideshow Stop Text', 'ZEN_COLORBOX_SLIDESHOW_STOP_TEXT', 'stop slideshow', '
Link text to stop the slideshow.

Default: stop slideshow', @cgi, 140, NOW(), NULL, NULL), ('Gallery Mode', 'ZEN_COLORBOX_GALLERY_MODE', 'true', '
If true, the lightbox will allow additional images to quickly be displayed using previous and next buttons.

Default: true', @cgi, 150, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'), ('  Include Main Image in Gallery', 'ZEN_COLORBOX_GALLERY_MAIN_IMAGE', 'true', '
If true, the main product image will be included in the lightbox gallery.

Default: true', @cgi, 160, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'), ('EZ-Pages Support', 'ZEN_COLORBOX_EZPAGES', 'true', '
If true, the lightbox effect will be used for linked images on all EZ-Pages.

Default: true', @cgi, 170, NOW(), NULL, 'zen_cfg_select_option(array(''true'', ''false''),'), ('  File Types', 'ZEN_COLORBOX_FILE_TYPES', 'jpg,png,gif', '
On EZ-Pages, the lightbox effect will be applied to all images with one of the following file types.

Default: jpg,png,gif
', @cgi, 180, NOW(), NULL, NULL);]
If you were entering information, press the BACK button in your browser and re-check the information you had entered to be sure you left no blank fields.

I am stuck with this. Seems there has been Colorbox earlier or at least it works on the site but no admin options are visible thanks to this error.

Any help would be greatly appreciated.
BR,
Oops