Zen Colorbox

[torvista]

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.

[MaxBodine]

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?...19ga23f74m0t01

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!

[MaxBodine]

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?...19ga23f74m0t01

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!

[mc12345678]

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.

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

[mc12345678]

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.

[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!

[mc12345678]

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 (accesses the site using the mobile type layout) and review the console log, I see that there is a javascript error:

SCRIPT70: Permission denied
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)