Zen Colorbox

Problem solved by changing
includes/templates/responsive_classic/css/stylesheet_zen_colorbox.css:
around line 5
...left:0;
to
...right:0;

Not the best solution as it is stuck to the right now but I have the page under as should be...:)

Is there any way to make the popup window display the image at 800 px high? The images in the colorbox window are limited to 604px high - would like them to show at 800px high.

Site is here

Thanks in advance

Version 1.5.5.e -IH and Colorbox addons

charmedbytina2:

Is there any way to make the popup window display the image at 800 px high? The images in the colorbox window are limited to 604px high - would like them to show at 800px high.

Site is here

Thanks in advance

Version 1.5.5.e -IH and Colorbox addons

It's not limited to 604px specifically.. It may be on your screen/setup, but I just accessed the site from a browser and at first it was only 534px tall, then when I resized the browser to allow a larger height, then the image was presented at 563px... When I played with the css to present the image with a larger resolution the image grew in size within the window and would no longer fit...

All of that to say that I don't think that it is quite understood how all of this works together in particular responsive design. Basically the image is displayed at a dimension that fits the screen. That size may be smaller than the "original" image, but that's where the setup versus result comes into place. Zooming in versus seeing the image all on screen. The sizing of the original image to be "effective" as well, etc...

I just tried something else. On the page, I zoomed out to view at 60%, then when clicking on the image to see the larger view of it, it was presented at its original "size" which was 800px tall, but it didn't fully fit the screen because none of this is about magnifying in, though after opening the image at that size, it is possible to zoom in on the page which also zooms in on the image, though the "border" shrinks in around it.

Hi there,

Updated to 2.1 colorbox version - many thanks. I was very careful with any merging, the only addition I put is some responsive tags to make images start smaller. Without these tags, I currently get a whitebox with animation on images that are around 750px per side. It might be for some slightly smaller than that. It was working before so maybe I need to tweak something? Thanks in advance.

Example below when clicking large image click:-

https://www.thegemtree.com/fashion-jewellery-alchemy-gothic-pendants-c-322_170/fibonnacis-golden-spiral-nautillus-pendant-p-21504

I found out what it is. In includes/functions/extra_functions/zen_colorbox.php, taking this code out lets all large images show with no issue:-

$basepath = "";
$realBase = realpath($basepath);
$userpath = $basepath . $src;
$realUserPath = realpath($userpath);
if ($realUserPath === false || strpos($realUserPath, $realBase) !== 0) {
$src = '';
}

Am not sure if this has any ill effects taking this out. But it could be based on the template I am using, maybe not affecting others.

HeathenMagic:

I found out what it is. In includes/functions/extra_functions/zen_colorbox.php, taking this code out lets all large images show with no issue:-

Am not sure if this has any ill effects taking this out. But it could be based on the template I am using, maybe not affecting others.

That portion of code is intended to validate that the image requested is coming from the local server and that the image exists in the location identified. It is from "core" (default) ZC files. Would be interested to know what portion/part was causing the large images to not be presented and/or what may have caused that issue. At the time of incorporation, it seemed to be the right place to add it. If not, then need to find why and correct it... your help in the matter would be greatly appreciated.

Thanks for your response. I would like to help, I am not very technical though. Before removing the code, the image would link to home page, not sure if that helps at all. I tried increasing max large image values to see if it is that but still the same. I have Image Handler also, I have had that since first version and it has been gradually updated. Not sure if that has a bearing on it either. Some enlargements load from cache, some from another folder.

Based on the above and an independent notification, the problem with the sanitation code was corrected (added too early within the file) as well as an issue/rewrite of a few of the javascript files. Version 2.1.1 will be posted to the forum shortly for review, but is also available from github: https://github.com/mc12345678/zen-colorbox/tree/2.1.1

• Updated installer/updater to exclude operation if the logoff was selected.
  • Relocated code that was disabling a properly formatted/named Image Handler 4 image to allow IH4 and
    zen colorbox to continue to operate together.
  • Completed the incorporation of the code template code to minimize code rewriting/retyping. This also
    removed a javascript error that was generated on the checkout_payment page.
  • Incorporate ZC 1.5.5 code into the includes/modules/YOUR_TEMPLATE/additional_images.php file including
    notifiers and the comments at the top of the file.
  • Removed the obsolete language="javascript" parameters from the HTML <script> tags.

mc12345678:

Based on the above and an independent notification, the problem with the sanitation code was corrected (added too early within the file) as well as an issue/rewrite of a few of the javascript files. Version 2.1.1 will be posted to the forum shortly for review, but is also available from github: https://github.com/mc12345678/zen-colorbox/tree/2.1.1
As some have discovered, version 2.1.1 of the zen-colorbox plugin is now available from here.

mc12345678:

As some have discovered, version 2.1.1 of the zen-colorbox plugin is now available from here.

I just installed it and when main image tries to open, it continues in a loop and doesn't open, on the other hand I can open additional images and I can browse from pic to pic but can't get main image to show. It will stay in a continues loop.

This is the error from the logs:

[30-Aug-2017 20:00:29] PHP Fatal error: Call to undefined function zen_lightbox() in /.../includes/templates/my_template/templates/tpl_modules_main_product_image.php on line 24

ideasgirl:

I just installed it and when main image tries to open, it continues in a loop and doesn't open, on the other hand I can open additional images and I can browse from pic to pic but can't get main image to show. It will stay in a continues loop.

This is the error from the logs:

Looks like the file includes/functions/extra_functions/zen_colorbox.php has not been placed or is incomplete based on the error message; however, that doesn't make sense as that portion of the code is only to be executed when the function exists.

The only real code that is affected by that is the main product image. Elsewhere, such as the additional images, if the function is not present then it displays images in other ways.

What is the code that exists at line 24? When incorporating the plugin into that file were "minor" characteristics ignored? Javascript code that is in this area tends to be "ignored" when minor changes/differences are ignored.

What is the code that exists at line 24?

document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" class="' . "nofollow" . '" title="' . addslashes($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');

When incorporating the plugin into that file were "minor" characteristics ignored?
Not sure what you mean..:blink:

What I know is that this version was changed in the functions file and on this file. Also the thing is that the additional images come up without issue, only main image doesn't show up.

ideasgirl:

document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" class="' . "nofollow" . '" title="' . addslashes($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');

> 
> 
> Not sure what you mean..:blink:
> 
> What I know is that this version was changed in the functions file and on this file. Also the thing is that the additional images come up without issue, only main image doesn't show up.
What I meant was that some comparison tools allow ignoring what is considered minor edits or "comments" to be excluded when doing the comparison of old to new. Sometimes where javascript is involved, changed content will not display when minor edits are ignored. 

I just loaded a large image to a ZC 1.5.5e new product to a store that has IH4 and this plugin zen colorbox, while it took a moment to load the main image, it did load, then would load on each time it was opened/closed and again opened.

If you would like to send me a link, maybe I could see something on the page. As to the error message, perhaps could paste the entire file here to see why the code permits entry into this section but then errors that the function verified present a few lines up is not right. Then also the zen_colorbox function found in includes/functions/extra_functions/zen_colorbox.php

Info sent through PM.

I forgot to send you this as well:

Also forgot to mention that is messing up the square (border) of the picture, because it's supposed to be grey (not blue), and its misaligned. I thought that probably I would fix it after the issue is solved but probably is related to the issue.

ideasgirl:

Info sent through PM.

I forgot to send you this as well:

Also forgot to mention that is messing up the square (border) of the picture, because it's supposed to be grey (not blue), and its misaligned. I thought that probably I would fix it after the issue is solved but probably is related to the issue.
There appears to be something wrong with the zen_colorbox function that is causing the image filename not to be returned, something similar to what was happening before. Would check to validate that the correct file has been uploaded.

As to the image "size", in the html, I don't see a size discrepancy. Would have to look around to see how the image is "appearing" as 50x50, but don't see anything obvious. On my device it takes the full screen when selecting the additional images.

G'day all,
After a lot of trial and error, I've finally setup this module (ver 2.1.1) into ZC 1.5.5, which seems to be working as it should...

I do have one issue that I can't figure out in that all the pictures (which ARE enclosed in the colorbox) are showing larger than the screen size. It could be the fact that the files are on the large size, but I would have thought they would be resized to suit the screen size.
Am I missing something, or did I just do it wrong? (again...!)

Here's my problem page -> http://www.labelx.net/index.php?main_page=product_info&cPath=2_3_5&products_id=2
that will give a better idea of what I'm babbling about.

Thanks in advance :)
John

Foster660:

G'day all,
After a lot of trial and error, I've finally setup this module (ver 2.1.1) into ZC 1.5.5, which seems to be working as it should...

I do have one issue that I can't figure out in that all the pictures (which ARE enclosed in the colorbox) are showing larger than the screen size. It could be the fact that the files are on the large size, but I would have thought they would be resized to suit the screen size.
Am I missing something, or did I just do it wrong? (again...!)

Here's my problem page -> http://www.labelx.net/index.php?main_page=product_info&cPath=2_3_5&products_id=2
that will give a better idea of what I'm babbling about.

Thanks in advance :)
John
Wouldn't say that you missed something specific to the plugin, perhaps could have some improvements to what is presented to the plugin and once provided accomplish additional display modifications by the below.

So sort of two things, the colorbox software can support resizing of an image with the following additional constraints which are also shown from the developer's page: http://www.jacklmoore.com/colorbox/

Dimensions

|

 Parameter      | 

Default Val |
Description |

 width      | 

false |
Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
|

 height      | 

false |
Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
|

 innerWidth      | 

false |
This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
|

 innerHeight      | 

false |
This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500 |

 initialWidth     

|
300 |
Set the initial width, prior to any content being loaded. |

 initialHeight     

|
100 |
Set the initial height, prior to any content being loaded. |

 maxWidth     

|
false |
Set a maximum width for loaded content. Example: "100%", 500, "500px" |

 maxHeight     

|
false |
Set a maximum height for loaded content. Example: "100%", 500, "500px" |

One or more of the above can be set/added in includes/classes/zen_colorbox/options.php
The values in the second "column" (Default Val) represent the default value that is used by the code when no assignment is provided.

The current implementation of the software in this plugin offers only the initialWidth/initialHeight settings from the admin.

When I said that there are two things, well, the second is that even without assigning a final/designated maxWidth or maxHeight, the image as compared to either earlier versions of the additional software or earlier versions on a mobile device is that it seems that the image no longer needs to be "chased" while trying to see the image better.

As to why the other options have not been incorporated directly, well there are a few excuses and a few suggested "reasons". I know that one thing is that as you said you're using the actual large sized image which has not been resized say as is done with Image Handler 4 where it will downsize an image to fit within a desired size or by use of the settings in the above table, but another aspect of consideration is how the software/image will respond to attempts by the end user to resize the image after display within the window at a size amenable to the device. Ie. will the image again be resized to fit the knew "view" or will it allow zooming in to really see a larger image?

The goal of the larger image is to be able to see the detail better than as originally presented. Continuously "downsizing" the image to the screen display makes this less than useful if unable to "zoom in" to see that detail. Yes, at the same time making the image unviewable because of its tremendous dimensions also has a negative impact on the user experience. The jquery operation of the colorbox code offers a balance to/with that, but also do other utilities that will push a more appropriate size (potentially less data and therefore faster operation than the recipient's processor making adjustments). Ie. Presenting a downsized image to the device provides this reduction in data and increased speed.

I will look into adding some of the above as features for the plugin, to increase its out-of-the-box versatility. Of course with added features comes the need for additional support.

My thanks for your help, that's exactly what I was trying to achieve...
I was working the code in this area, but not knowing the extra settings, I couldn't figure it out.

Here's the solution I used in the code by adding the 'maxHeight' value -

echo 
'opacity:' . ZEN_COLORBOX_OVERLAY_OPACITY .
',maxHeight:' . '850' . 
',speed:' . ZEN_COLORBOX_RESIZE_DURATION .
',initialWidth:' . ZEN_COLORBOX_INITIAL_WIDTH . 
',initialHeight:' . ZEN_COLORBOX_INITIAL_HEIGHT . 
',overlayClose:' . ZEN_COLORBOX_CLOSE_OVERLAY .
',loop:' . ZEN_COLORBOX_LOOP;
if (ZEN_COLORBOX_SLIDESHOW == 'true')
{

Strangely though, if I tried a % value, colorbox stopped working and went straight to a full screen.

What I'm trying to do is use an oversized image which gets re-sized for viewing. With setting maximum height limits (in my case, 850), all the pictures will be processed and shown at the same 'level' on the screen. It seems to me a cleaner way to view the images when they all show at one height.
An obvious glitch for this idea is when a picture is under 850 in height, the colorbox will show it in a smaller box size, but I can live with that :)

With the multitudes of screen sizes and devices around now, it's close to impossible to cater for everything. What I've put in here is perfect for MY screen and I can only assume that it would be OK for others.
Maybe another idea could be to add a set of radio buttons for small, medium and large in the colorbox area to allow customers to resize as they need. Depending on what's selected, it could change the value of maxheight as they view...

Again, my thanks - that's what I was trying to do :)
John

While I can't say that I have specifically tried it, but the referenced instructions seem to indicate that if you set specific dimensional settings that it would also increase the image size to fit (causing that smaller than 500 in height image to expand). But regardless, understand that such zoom also has the potential of degrading the quality of the image.

Again though I would also recommend Image Handler 4 to support some of what you're trying to do with providing uniformly sized images that are each sized on the server's side to download to the visitor using just the data associated with that image which would be "sized right" based on the initial settings.

As to the "resize" feature, that's a curious feature indeed. Wondering how hard it would be to associate a slider instead of a discrete button... though likely to be done in "steps". :)

Thanks for the suggestion of the image handler... I've downloaded it, so I'll read through everything and try it out :)

I prefer not to enlarge the smaller images (in the concept of this thread) because of what you pointed out where the image will lose 'quality'. I'd prefer resizing colorbox to suit smaller images. For my particular case, I've also re-sized the images on the server - as you pointed out, they WERE a little big! :)

A slider would be a good concept - I like that idea better than radio buttons... I'm just tossing a suggestion out with no concept of what can or can't be done - my PHP coding skills are pretty much non-existent, so I wouldn't even know if that sort of thing is possible. (I'm full of ideas - 95% of them are rubbish! LOL)

Thanks again, John