Zen Colorbox

mikebr:

I was working with the tpl_footer.php and added the following code:

<script> jQuery(function($) { $("#productMainImage").click(function(){ var sty=$( "#productMainImage" ).attr( "style" ); $("#cboxContent").attr("style", sty); }) }) </script>

This seems to do the trick
Any thoughts
Thanx
Mike
So I think the colorbox code adds some amount of style information to the displayed image. I would think that the background image would be added to that information rather than replace it. The other thing was that I was thinking that perhaps the executed code loaded from the footer might be better suited in a colorbox "event" loader. At least then it may stay together with the colorbox files and logic. If not done that way, would still suggest "testing" for the existence of #cboxContent to be sure that at some future point this additional code wouldn't cause a javascript error that could affect site operation.

Just my two cents worth.

The image I get when I install this on a fresh 1.5.6 cart and click the product info page's main image is super small. Is there a step I missed?

swguy:

The image I get when I install this on a fresh 1.5.6 cart and click the product info page's main image is super small. Is there a step I missed?

Sorry for the delay, really should wait a little longer to answer, but two things come to mind, one is that the image is originally really small, the other is if the site at some point in the past had installed colorbox previously. In the case of the second situation, have found that executing the uninstall sql two or more times in a row (without other navigation) may resolve the issue. Still looking at this for ZC 1.5.7 which is why I don't have much more of an answer at the moment, though am pretty sure it's discussed elsewhere here.

1.5.7 answer will no doubt apply to 1.5.6. Thanks for investigating, let's see what you find. Could be that it just needs tweaking for tiny images.

I just noticed that there is a PHP Warning in vanilla Zen Cart versions 1.5.6c and 1.5.7 (PHP Version: 7.3.20) and Zen Colorbox-2.1.2 because of undefined constants LARGE_IMAGE_WIDTH and LARGE_IMAGE_HEIGHT

[07-Aug-2020 20:50:53 UTC] Request URI: /zen-cart-v1.5.7/index.php?main_page=product_info&cPath=2_20&products_id=23, IP address: 00.000.000.000
#1 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]
#2 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [public_html/zen-cart-v1.5.7/includes/modules/pages/product_info/main_template_vars.php:153]
#3 require(public_html/zen-cart-v1.5.7/includes/modules/pages/product_info/main_template_vars.php) called at [public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/common/tpl_main_page.php:177]
#4 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/common/tpl_main_page.php) called at [public_html/zen-cart-v1.5.7/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_WIDTH - assumed 'LARGE_IMAGE_WIDTH' (this will throw an Error in a future version of PHP) in public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

[07-Aug-2020 20:50:53 UTC] Request URI: /zen-cart-v1.5.7/index.php?main_page=product_info&cPath=2_20&products_id=23, IP address: 00.000.000.000
#1 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]
#2 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [public_html/zen-cart-v1.5.7/includes/modules/pages/product_info/main_template_vars.php:153]
#3 require(public_html/zen-cart-v1.5.7/includes/modules/pages/product_info/main_template_vars.php) called at [public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/common/tpl_main_page.php:177]
#4 require(public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/common/tpl_main_page.php) called at [public_html/zen-cart-v1.5.7/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_HEIGHT - assumed 'LARGE_IMAGE_HEIGHT' (this will throw an Error in a future version of PHP) in public_html/zen-cart-v1.5.7/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

Fix for that issue: run this in Admin > Tools > Install SQL Patches

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Product Info - Image Width', 'LARGE_IMAGE_WIDTH', '150', 'The pixel width of Product Info images', '4', '80', now());
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Product Info - Image Height', 'LARGE_IMAGE_HEIGHT', '120', 'The pixel height of Product Info images', '4', '81', now());

swguy:

The image I get when I install this on a fresh 1.5.6 cart and click the product info page's main image is super small. Is there a step I missed?

Adding this into the bottom of colorbox.css file well effect the initial size of your image

#cboxLoadedContent img {width:70vw !important; height: auto !important;}

sets the image width to 70% of viewable window while keeping it some what responsive on height. #cboxContent auto expands to meet the new image size.

davewest:

Adding this into the bottom of colorbox.css file well effect the initial size of your image

#cboxLoadedContent img {width:70vw !important; height: auto !important;}

> sets the image width to 70% of viewable window while keeping it some what responsive on height.  #cboxContent auto expands to meet the new image size.

Thing about the "expansion" is that yes the image shown as a demo is super small... I've actually had difficulty in using the ZC default product to find images that are expected to be relatively realistic to the everyday site owner. The images are initially super small and there is nothing to which to enlarge really. An alternative has been to disable the text for such images or to possibly hop into some of the code's events for such small images (at last review one would have to identify the need for this by manual/coded method). 

I haven't actually tried your suggestion, but I know that I spent several hours mucking around with just this type issue when I was last working on adjusting the responsive design portion of it. In fact I don't know why I led swguy on to thinking that there was anything different expected than what was shown in the previously attached image other than the site on which I've been testing this against 1.5.7 keeps indicating that I am cross domain requesting content which is why I indicated that I'm still working on it. Not sure if the server/computer was having a day or what, but I was getting a hard fail at anything javascript or primarily ajax...

Any chance someone could post the amended 1.5.7 version of core override please?

1_Installer_Files\includes\templates\YOUR_TEMPLATE\templates\tpl_modules_main_product_image.php

I'm not sure if the changes made to the core code between V1.5.6 and V1.5.7 also need to be made in the Colorbox insertions.

Brent:

Any chance someone could post the amended 1.5.7 version of core override please?

I'm not sure if the changes made to the core code between V1.5.6 and V1.5.7 also need to be made in the Colorbox insertions.

Umm, there is nothing that really changed other than some comment characters were removed more for "consistency" than for functionality.

E.g. where the pairings of '<!--' and '//-->' were previously used, they have been removed. Otherwise no change in the code since ZC 1.5.5.

Thank you. That is what I was referring to. Obvious if you can code but not if you are trying to upgrade using Beyond Compare :smile:

Apologies if this has been asked and answered elsewhere in this thread. I did try to search for it but did not find a relevant result.

I'm finding that the title div for the light box (#cboxTitle) is covering up the bottom of the images. Is there a way to change this so it appears below the image instead of on top of the bottom part of the image? Maybe there's a CSS hack I can add?

Thanks for any tips on this!

Thanks to @mc12345678 for updating this plugin - works like a champ!

Hmm... jinxed it.
The main image looks great but the additional images come out small - original sized. I could have sworn this was working - any clues?

swguy:

Hmm... jinxed it.
The main image looks great but the additional images come out small - original sized. I could have sworn this was working - any clues?

I do recall seeing a similar problem reported in this post (https://www.zen-cart.com/showthread.php?222983-Image-Handler-5-(for-v1-5-5)-Support-Thread&p=1378304#post1378304)

In that case the issue was with the LARGE_IMAGE_WIDTH and LARGE_IMAGE_HEIGHT, although I can't imagine that would be a mistake you would have made.

swguy:

Hmm... jinxed it.
The main image looks great but the additional images come out small - original sized. I could have sworn this was working - any clues?
In:
includes/classes/observers/auto.zen_color_box_observer.php

At/around line 80 perhaps add the following that is in blue:

            $thumb_slashes = $paramsArray['thumb_slashes'];
            $large_link = isset($paramsArray['large_link']) ? $paramsArray['large_link'] : (isset($GLOBALS['large_link']) ? $GLOBALS['large_link'] : '');
            $i = $paramsArray['index'];

This was additional information to be carried in the Zen Cart 1.5.7 notifier within includes/modules/additional_image.php file that was not present in Zen Cart 1.5.6 when this section of code was first incorporated and at that time an issue with a missing "large_link" was not evident. It may/may not resolve that issue, but...

Now, that said, I of course question the concern of why it shows as originally stored as compared to the perhaps reasoning to think it would be other than the original image? Ahem... Is there perhaps some additional image handler installed that is/has resized the image? The colorbox doesn't necessarily make the image "larger", it adds a box around the existing image. Or is the issue that the box is not properly sizing around the image and causing an issue with seeing the image "within"?

I am running version 2.1.2 of ColorBox for Zen Cart and the file includes/classes/observers/auto.zen_color_box_observer.php does not exist.

simon1066:

...

In that case the issue was with the LARGE_IMAGE_WIDTH and LARGE_IMAGE_HEIGHT, although I can't imagine that would be a mistake you would have made.

LOL as it turns out that was exactly what it was. These values are missing from some databases, resulting in a PHP Notice. I just set them to 150, thinking nothing of it, and that broke Colorbox.

Hi, I have tried installing Colorbox 2.1.2 several times on a site running Zen Cart 1.5.5e, and can't get it to function correctly. I've just uninstalled 2.1.2 and installed 2.1.3 with the same result. All the configuration values show up correctly in admin, but Colorbox isn't functioning on the public site.

After reading completely through all the posts on this forum, I used the developer console in my web browser (Safari) and found the following error in the installs for both 2.1.2 and 2.1.3:

TypeError: undefined is not an object (evaluating 't.support.opacity') query.colorbox-min.js:17:2492

I would greatly appreciate any help in resolving this.

Question.
I've been having some issues trying to use colorbox for popup windows particularly for coupon popups called from the product info pages.
I currently have a coupon displaying in the product page (installed through banner manager), but whenever I click on the banner the first time the popup won't load, it would only display a small blank popup. Clicking it a second time will somehow load and display the actual coupon info as it should.

Can someone point me in the right direction or guide me on what I'm doing wrong??

Link for a page on the live site https://www.byvalenti.com/index.php?main_page=product_info&cPath=8_14&products_id=96
The code I'm using through the banner manager in the html area to call the coupon popup

<a href="javascript:couponpopupWindow('index.php?main_page=popup_coupon_help&cID=32')"><img src="images/banners/promoproduct6.jpg"></a>

Version of colorbox is 2.1.2 downloaded from the plugin area.

Thank you!