Zen Colorbox

Thank you.
My apologies, I forgot to thank YOU for maintaining this mod and taking the time to wade through all those posts about responsive stuff.

torvista:

My apologies, I forgot to thank YOU for maintaining this mod and taking the time to wade through all those posts about responsive stuff.
Speaking of, though admin/includes/installers/zen_colorbox/2_1_3.php is not specifically necessary at the moment, care to take a look and provide feedback on the changes made thus far in the 2.1.3 branch: https://github.com/mc12345678/zen-colorbox/tree/v2.1.3

I realize there may still be some "debate" to be had about the responsive response to screen size adjustment. The previous method remains available (requires code change at the moment). I'd be interested in suggestion of way forward: either admin switch or some level of code change by the end user. Ideally whatever seems to be "easiest" with understanding that more than likely once selected it would remain as it is until some level of upgrade (which potentially could be an issue for upgrades of the plugin and having to merge in those changes...)

I am thinking that the responsive portion of code that is outside of the base javascript likely should be kept in a separate file to make that aspect of upgrade improved so that the base code would be modified as/if updated and the individual modifications to support say the above discussion kept separate.

Anyways, more perspectives support finding a generally common ground.

zc 1.5.5e live site, 1.5.5f test site. Responsive Sheffield Blue 2.0, many other mods. Php 5.6 live site, Php 7.1 and also 5.6 on wamptest site.

I installed the most recent update of Zen Colorbox on my test site with no hiccups. I uninstalled earlier version that was merged into the RSB template, and removed the code from the template installer file that auto set up Colorbox (which has always worked for me as display in this template, except the admin/config options don't function). The updated install was flawless and everything works. I also installed on a second test site which was a clean zc 1.5.5f install with only clone template set up. Also flawless.

I tried to replicate on live site and made a mess! Using the admin/tools/sql box I copied in the install sql for zc5 and it froze my site front end, back end, and my access to my cpanel. It all came back on after about 20 minutes. So I tried again, this time copying the install sql into phpMyAdmin.

This line from the query was highlighted as an error (unexpected syntax near ?)

'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''), '),

I tried removing that line from the query and the rest installed. However the mod doesn't work. The config menu doesn't show up and the store images show up in pop up boxes and at a very slow speed. Thankfully I backed up my database and my files beforehand so I bailed.

Apologies for the long winded lead up to my question:

Is there a particular php setting that needs to be enabled for that phrase to be accepted. Or anything else spring to mind? (Some of my mods are older besides the template, but I see this phrase is also in the 1.3 sql install file).

While there is an error in the problem line that was removed from the sql (see the last couple of pages where a suggested resolution was proposed and later incorporated into the above github version about which I'm waiting to hear back from anyone on).

I don't see (or perhaps understand) why the auto-installer was not used and instead a manual query was executed.

Add to this, would suggest that the uninstall query (found in YOUR_ADMIN/includes/installers/zen_colorbox) be executed at least twice based on the menu not appearing in the configurations section.

If going to execute the manual install from within phpMyAdmin, then I would suggest replacing ```

With:

'true'

This line also should not be executed by itself because it also includes a data reference to insert the configuration key in the colorbox configuration menu. Running by itself without first collecting that piece of data will associate it to a configuration menu having a gID=0 in the uri.

mc12345678:

I don't see (or perhaps understand) why the auto-installer was not used and instead a manual query was executed.

Add to this, would suggest that the uninstall query (found in YOUR_ADMIN/includes/installers/zen_colorbox) be executed at least twice based on the menu not appearing in the configurations section.

If going to execute the manual install from within phpMyAdmin, then I would suggest replacing ```

> With:
> ```
'true'

This line also should not be executed by itself because it also includes a data reference to insert the configuration key in the colorbox configuration menu. Running by itself without first collecting that piece of data will associate it to a configuration menu having a gID=0 in the uri.

Thanks very much. My first problem, probably, was that I misread the install info - I thought I needed to put in the sql statement to allow the auto-install to work. Which sounds really dumb now that I type it! I'll give your suggestions a go on a clean test install. I'm sure my live site is a little more challenging because old version Colorbox is incorporated throughout the template.

mc12345678:

...
I don't see (or perhaps understand) why the auto-installer was not used and instead a manual query was executed.

Add to this, would suggest that the uninstall query (found in YOUR_ADMIN/includes/installers/zen_colorbox) be executed at least twice based on the menu not appearing in the configurations section...

Just to confirm - you were quite right that running the sql install on top of the auto install appears to have been the culprit. I haven't gone live with the update yet but tried on test site 3 times, each successful:

1. run uninstall twice. Check phpMyAdmin to make sure old tables are gone.
2. load the new file set
3. go into admin panel - shows Zen Colorbox loaded. Refresh screen to get config menu to appear.

And because base template is Responsive Sheffield Blue 2.0 - edit out the old version Colorbox install code in admin/includes/installers/RSB/2.0, and load this revised file along with the Zen Colorbox files.

Thanks for your help mc12345678

Good to hear.

If you used the 3.1.2 fileset referenced above, could you try something while a colorbox image is displayed? Attempt to resize the window (on whatever device) and/or attempt to zoom in.

What I saw happening on desktop was that everything resized by width of the window. On alternate devices (tablet and mobile) resizing only occurred if a zoom was performed and then the orientation was changed. Both of these were intentional in this way. Looking for feedback on expectation versus operation.

Resizing based on change to next image occurs such that when selecting the next/previous image the colorbox was resized to fit the width of the current view such that a tall vertical image may extend above/below the current screen dimension if vertically short in view. This is different than previous where the colorbox was proportionally sized to fit within the maximum of 95% of either the height or width, whichever was smaller.

Having a small annoyance with current install of this plugin on a fresh Zencart 1.55f. Larger images pop up just fine on a desktop-sized viewport, but overflows when shown on smaller mobile viewport.
Good:

Bad:

Any ideas?

tditty:

Having a small annoyance with current install of this plugin on a fresh Zencart 1.55f. Larger images pop up just fine on a desktop-sized viewport, but overflows when shown on smaller mobile viewport.
Any ideas?

Please take the time to review recent posts, preferably as far back as when a plugin was last issued to see if an issue has already been addressed, identified, or corrected.

The post that identified a solution to this issue was: https://www.zen-cart.com/showthread.php?196446-Zen-Colorbox&p=1339321#post1339321 which is a couple of "pages" back, but even in the last post a discussion is had about a solution that may apply. That said, welcome (back?) to ZC. I believe implementing either the upgrade or applying the code that was basically accidentally omitted will resolve the issue described. The question becomes does it resolve it the desired way?

mc12345678:

Good to hear.

If you used the 3.1.2 fileset referenced above, could you try something while a colorbox image is displayed? Attempt to resize the window (on whatever device) and/or attempt to zoom in.

What I saw happening on desktop was that everything resized by width of the window. On alternate devices (tablet and mobile) resizing only occurred if a zoom was performed and then the orientation was changed. Both of these were intentional in this way. Looking for feedback on expectation versus operation.

Resizing based on change to next image occurs such that when selecting the next/previous image the colorbox was resized to fit the width of the current view such that a tall vertical image may extend above/below the current screen dimension if vertically short in view. This is different than previous where the colorbox was proportionally sized to fit within the maximum of 95% of either the height or width, whichever was smaller.

The most recent Colorbox is so far only on my test site, with zc1.5.5f and Responsive Sheffield Blue 2.0. I have a few different sizes of desk top monitors and on all the image box is width set with height adjusted to fit, even when I drag the page from one monitor onto another.

One small thing I notice - there is some 'start' or 'stop slideshow' text bottom left of the lightbox, near the left/right arrows. The text is cropped off along the bottom, though clicking it does start or strop a slideshow. My site is highly modified so that may be result of some other css change I made in the past (?).

My livesite is previous version (no version shows but was part of RSB template which is several years old). Desk top works as above although config settings have never properly worked (IMO) - for instance no slide show. When looking at the site on my iPad or iPhone the image boxes resize seemingly by width and height both, remaining in correct proportion according to the image. Rotating the screen leads to a distorted screen view that is larger than the screen itself and the photo uncentered and partially offscreen. The image box does, however, resize itself to fit the new display orientation. In some cases the resulting image may be cropped or off center. Other than changing orientation mid-view the lightbox behaves in both portrait and landscape orientation for me. I don't have zoom on the livesite - I actually removed the files - even when turned off they were generating errors.

When I upload zc 1.5.5f which includes the new Colorbox and IH5 I'll put it through its paces and feedback further.

It DID resolve the issue in a desired way. The resize is a little funky when resizing after the initial view, but I can live with it. Thanks.

I often use language-specific images in the product descriptions, so use a lightbox on those too.

Some stuff that would have been helpful to me in the readme:

To use a lightbox on images embedded in the product description, they need rel="colorbox" in the <a link.

To restrict groups of images to a lightbox: eg. if there are ten images in a description and 4 refer to one thing, 6 to another.
use rel="colorboxWhateverSuffixYouLike" and rel="colorboxWhateverSuffixYouLikeMore" on the image <a links and that will put the first 4 images in a lightbox captioned 1 to 4 and the rest 1 to 6.

For a text caption/title to show in the lightbox, title="text" must be in the <a link too: it will not pick up the title from the inner <img tag, as you may expect.

To change the borders (colour/width) of the lightbox, you have to edit the image: ...includes\templates\YOUR_TEMPLATE\images\zen_colorbox\controls.png
and then change css background width and position for 9 divs (<div id="cboxTopLeft" etc) to get the correct bit from the image. Not easy.

Colorbox is interfering with mobile menu style. NEED HELP ASAP PLEASE!!! My current cart I am replacing went out of business so I can't make changes.

I have narrowed it down to the Colorbox. I can turn it off in admin and I don't have this issue. when using the mobile version as soon as I get to the product info page, my menu looses the css style and just shows a bunch of links.

I have 1.5.5f and 2.1.2 colorbox installed. I also have mega menu installed and use this code below to hide it in responsive.css and responsive_mobile.css so it blocks mega menu in mobile. Should I use this elsewhere or something different?

@media (min-width:0px) and (max-width:480px){ #mega-wrapper { display:none;visibility:hidden; }

Here is my site:
https://www.uesakausa.com

Here is where the colorbox is blocking the style.

https://www.uesakausa.com/index.php?main_page=product_info&cPath=23&products_id=26&zenid=nhm3badv9h5019ga23f74m0t01

I can not figure out what is happening on this page and why colorbox is blocking the styles. Need to get this Zen Cart up and running so I can move it to the main server and replace the site before it crashes. Thanking you in advance!

Colorbox is interfering with mobile menu style. NEED HELP ASAP PLEASE!!! My current cart I am replacing went out of business so I can't make changes.

I have narrowed it down to the Colorbox. I can turn it off in admin and I don't have this issue. when using the mobile version as soon as I get to the product info page, my menu looses the css style and just shows a bunch of links.

I have 1.5.5f and 2.1.2 colorbox installed. I also have mega menu installed and use this code below to hide it in responsive.css and responsive_mobile.css so it blocks mega menu in mobile. Should I use this elsewhere or something different?

@media (min-width:0px) and (max-width:480px){ #mega-wrapper { display:none;visibility:hidden; }

Here is my site:
https://www.uesakausa.com

Here is where the colorbox is blocking the style.

https://www.uesakausa.com/index.php?main_page=product_info&cPath=23&products_id=26&zenid=nhm3badv9h5019ga23f74m0t01

I can not figure out what is happening on this page and why colorbox is blocking the styles. Need to get this Zen Cart up and running so I can move it to the main server and replace the site before it crashes. Thanking you in advance!

Well, note that the use of CSS doesn't prevent the code of the mega menu from being provided to the viewer, the view is just then modified in this case to not display a section of the page. But, it is also important to first ensure that only that section is to be affected and that the page validates. For example, when I ran the page through an HTML validator, there are two errors associated with the html code, one of which is in the middle of what is identified as the megamenu-wrapper. The other is similar but before the wrapper.

Also, I loaded the page with my mobile device in both desktop and mobile mode and did receive two different results. There are ways to use php to simply not output the mega-menu code as can be seen/provided in includes/templates/responsive_classic/common/html_header.php.

Why is it that when I turn off colorbox the mobile menu works? Doesn't that point to colorbox being my issue on there?

I will have to research more on the header, I am not experienced enough to make those changes now. But will dig into that after I get the main issue solved. Do you have any direction for me on that?

MaxBodine:

Why is it that when I turn off colorbox the mobile menu works? Doesn't that point to colorbox being my issue on there?

I will have to research more on the header, I am not experienced enough to make those changes now. But will dig into that after I get the main issue solved. Do you have any direction for me on that?
As colorbox uses javascript, a page that does not validate could respond erratically. When I used an online html validation tool for the above provided product page, there was an area that had the text 'cart.</p> </p>'. The second paragraph closure appears to not have an equivalent opener.

Additionally, I haven't been able (yet) to use a real computer to evaluate the load process to see if there may be a javascript error occurring, but considering that the goal and effect is to hide a portion of the screen, the existing html validation issues appear to relate.

I did take your advise and ran it through a validator. I found the same errors in the mega menu. I am now working on cleaning that up now. I will post back what the out come is for others as well. Thank you for the quick responses! Love the colorbox!

MaxBodine:

I did take your advise and ran it through a validator. I found the same errors in the mega menu. I am now working on cleaning that up now. I will post back what the out come is for others as well. Thank you for the quick responses! Love the colorbox!

Not sure what is going on, but when I try to access the following URI ```
https://www.uesakausa.com/index.php?main_page=product_info&cPath=23&products_id=26&layoutType=mobile

> jscript_jquery-1.7.1.min.js (2,3291)
> HTML1300: Navigation occurred.
> index.php
> HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
> index.php (1,1)

mc12345678:

Not sure what is going on, but when I try to access the following URI ```
https://www.uesakausa.com/index.php?main_page=product_info&cPath=23&products_id=26&layoutType=mobile

Also, though I didn't copy the link over, the javascript file is attempting to be found specifically on the site, not by reference to an external location. But, that said, I can click on the javascript link that is provided to me in the console and actually pull up the file. At the moment, I'm not sure why the difference in response with respect to that, but wanted to let you know what has been seen from a different perspective.