Zen Colorbox

[mc12345678]

Thank you.

Yes I had already started reading the instructions you linked, and did manage a few changes, wanted to be sure I hadn't missed something.

Not being a coder it's hard to understand all that's going on, i.e. will you please tell me where the inline styles are generated, and if they could be removed, and in case put on css file, and how to change the order of the content (image, title, controls)?

Inline content generally is made at the point of the final "output" of the link/content. That said, the best help/answer is obtained through more information. Ie. What website, what specific default content is to be modified, what plugin(s) or other modifications have been made to what file(s) that may be related to the content being modified. Applying css would require ensuring that there is a css "way" to reference it. Specific css files can be generated for specific "conditions" as outlined in the css_readme file found in includes/templates/template_default/css/

As for the other changes, will have to review a little to see what options are available and how to apply them.

[keneso]

Thank you.

Yes I am aware of the css readme file, I meant the generated styles in colorbox

<div id="cboxWrapper" style="height: 352px; width: 404px;">
<div id="cboxTopLeft" style="float: left;">
<div id="cboxTopCenter" style="float: left; width: 400px;">
<div id="cboxTopRight" style="float: left;">
<div id="cboxMiddleLeft" style="float: left; height: 348px;">
<div id="cboxContent" style="float: left; width: 400px; height: 348px;">
<div id="cboxLoadedContent" style="width: 400px; overflow: auto; height: 320px;">

I am using bootstrap, and trying to mimic its modal style, and mostly make the box resize at smaller resolutions, which does not, I have managed to add the responsive image class to the image, but the ones above seem to prevent it.

[mc12345678]

Thank you.

Yes I am aware of the css readme file, I meant the generated styles in colorbox

<div id="cboxWrapper" style="height: 352px; width: 404px;">
<div id="cboxTopLeft" style="float: left;">
<div id="cboxTopCenter" style="float: left; width: 400px;">
<div id="cboxTopRight" style="float: left;">
<div id="cboxMiddleLeft" style="float: left; height: 348px;">
<div id="cboxContent" style="float: left; width: 400px; height: 348px;">
<div id="cboxLoadedContent" style="width: 400px; overflow: auto; height: 320px;">

I am using bootstrap, and trying to mimic its modal style, and mostly make the box resize at smaller resolutions, which does not, I have managed to add the responsive image class to the image, but the ones above seem to prevent it.

First off, have you tried applying/adding the content that Paul3648 suggested back a few posts: https://www.zen-cart.com/showthread....21#post1339321 ?

As for the image generaly, it is supposed to be responsive without additional "work". But it may be that the file included with the plugin is missing the "last" piece for mobile devices. My tests have been with the ZC demo data which means the images are relatively small.

The dimensions that you are seeing are what have been generated by the plugin based on the jquery/javascript. It is the point of the software. Presumably (because I haven't had a chance to test it), the code from the above link will fix the mobile resizing issue.

As to the other css things, the title is basically positioned by the css that has been added by the plugin in the file: includes/templates/YOUR_TEMPLATE/css/stylesheet_zen_colorbox.css

There's a lot of information about such modifications already on the Internet found by searching on say colorbox github relocate title. Or other such changes.

[keneso]

Thank you.

I had read it, but forgot about it, anyhow I added the snip, and it does work if triggered at the smaller size, if you resize it does have a bug, first image does not resize, and will adapt after displaying another image, same when resizing from small to large; I know it is not a frequent use, as if I have a phone, or tablet the issue is not occuring, nevertheless thought to mention it, I also do undesrtand it is the original js, and this is not meant as a criticism, or else, just a FYI.

As per the styling to move the items I am aware of that, just I'd have liked to have control over the "output order".

OT
This is a great work, both original, and its adoption for plugin; nevertheless it's kinda overkill for my needs, and while I will keep playing with it for future use, I will the same play to solve the simple modal as my post where you suggested to look at this.

[mc12345678]

Thank you.

I had read it, but forgot about it, anyhow I added the snip, and it does work if triggered at the smaller size, if you resize it does have a bug, first image does not resize, and will adapt after displaying another image, same when resizing from small to large; I know it is not a frequent use, as if I have a phone, or tablet the issue is not occuring, nevertheless thought to mention it, I also do undesrtand it is the original js, and this is not meant as a criticism, or else, just a FYI.

As per the styling to move the items I am aware of that, just I'd have liked to have control over the "output order".

OT
This is a great work, both original, and its adoption for plugin; nevertheless it's kinda overkill for my needs, and while I will keep playing with it for future use, I will the same play to solve the simple modal as my post where you suggested to look at this.

Not sure I understand the second paragraph. It was my understanding that you wanted to be able to say place or position the title at a location other than the bottom. The css referenced is part of that placement changing say the title "placement" css from bottom: xxxxx to top: yyyyy which allows you control over the placement.

As to the last paragraph, part of why I suggested to look at one or the other plugins was to see what areas/files needed to be adjusted/addressed to modify the code to get a desired outcome either for the main image or the additional images. Yes there is some branching logic to support disabling the plugin, incorporation with other known software, etc..., but if you were to consider the path of just using "the plugin" and drop out all the other possibilities, you should be able to see what changes are needed to enable what option.

Beyond that, don't really want to see you spend a lot of time on something that may not provide as much return on investment as using something existing, unless an overall improvement is being seen. Doubt that is/was taken correctly, but idea is: continue to be creative and find new ways to do things and learn, minimize time on things that offer no value, there diamonds in the rough. :)

[mc12345678]

I just downloaded and installed the latest 2.1.2 version which looks great, except the images weren't resizing on small screens.

I found this code, meant to go at the end of the jquery.colorbox-min.js file in the template folder.

So just wondering if it's an oversight to leave it out? When I add it the images get resized as expected.

 // Begin Make ColorBox responsive
jQuery.colorbox.settings.maxWidth  = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox() {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.resize({width:'90%', height:'90%'});
    }
  }, 300);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

I have taken a look at this as is executed at least from my mobile device. I have one modification to it which I plan to implement by
commenting out the area that provides the problem.

 // Begin Make ColorBox responsive
jQuery.colorbox.settings.maxWidth  = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox() {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.resize(/*{width:'90%', height:'90%'}*/);
    }
  }, 300);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
// End Make ColorBox responsive

Overall what this does is to execute the resize function of the colorbox code in particular when the device "rotates" so that the image will remain "sized" and the overlay stay in place.
This portion:

      jQuery.colorbox.resize(/*{width:'90%', height:'90%'}*/);

Though, when it calls a designated width and height or a designated innerWidth and innerHeight, there is a problem seen when zooming in/out on a mobile device. With the original "width/height" style, the height of the image when zooming in becomes such that can not see any of the image and makes the feature useless. With "innerWidth/innerHeight" it is possible to zoom in and still see the image (after perhaps a little bit of a screen chase), but when zooming out, the area around the image becomes bigger than original and the text placement shifts, etc... But... Don't do/give anything, and the entire arrangement remains sized right, and that additional "responsiveness" remains present. So, I will be incorporating the above code with the commented out portion so that at least if one wishes to use what seems like was broken, that they could and see associated formatting.

[torvista]

Regarding making the lightbox responsive and post 224
https://www.zen-cart.com/showthread....21#post1339321

If the lightbox is opened, then the browser window resized, the lightbox is resized but not the contained image.
If the browser window is resized and then the lightbox is opened, the lightbox and contained image is resized.

I think in the real world that is fine for me.

The previous post about commenting out the 90% stops this from resizing at all, so I'm not sure about that conclusion.

[torvista]

Regarding possible future changes to this plugin.
It is not language-friendly as implemented.
I would suggest that the slideshow start/stop texts are moved out of the admin and into a language file along with new constants to use with the jscript override options in includes/classes/zen_colorbox/options.php
for these texts.

slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",

documentation
The readme is a bit minimal.
I would add links to this thread and a much more prominent mention that the original authors page has a great deal of useful information there.
A note to point out that the jscript plugin offers many options which can be overridden by placing the same parameters/options in this file:
includes/classes/zen_colorbox/options.php

[soxophoneplayer]

Using zen colorbox 2.x with Responsive Sheffield Blue 2.0

This Picaflor Azul template uses earlier version of colorbox and there are no options to configure on the admin panel. I was unsuccessful updating to Colorbox 2.x. I tried dropping existing Colorbox table from db but template simply put them back.

Eventually, discovered that the template installer: admin/includes/installers/responsive_sheffield_blue/2.0 has a section of code near the bottom of the file that installs the (earlier ver) of Colorbox. I removed that entire section of code then installed Colorbox 2 easy peezy using only the mod files. I did this AFTER I had dropped the db tables, so I don't know if it was necessary part of my success or not.

Other Picaflor templates such as Winchester Black, Winchester Responsive have similar set up so I presume this would work for them too. Other Picaflor templates like Westminster New use Lightbox.

Posted just in case anyone else was interested.

[mc12345678]

Regarding making the lightbox responsive and post 224
https://www.zen-cart.com/showthread....21#post1339321

If the lightbox is opened, then the browser window resized, the lightbox is resized but not the contained image.
If the browser window is resized and then the lightbox is opened, the lightbox and contained image is resized.

I think in the real world that is fine for me.

The previous post about commenting out the 90% stops this from resizing at all, so I'm not sure about that conclusion.

Having been looking over the code, testing options and further researching outside of the provided documentation (also referenced below), it is apparent that a solution has not been incorporated by the original author, but I am working towards one that provides a better result for the "zoom" possibility and would also improve response when changing the orientation of a device. The previous suggested methods (defining both width AND height) caused the issue I was seeing that on zoom, it was possible that the image "window" height would become so small that there would be no image viewable. The software (as described in the author's instruction) will auto-calculate the height if just the width (or innerWidth) is provided. Regardless, a side effect was that the usage of percentage for either causes the "border" of the colorbox to expand to the edge of the screen and then again shrink when the next image is chosen. This is appears as an unexplained change and doesn't look good. To that end an internal code modification has been identified (most effective is from issue 158 of the github repo for the colorbox software) that will resize the image and colorbox together when such function is called. Some additional work is being done to support the "zoom" (resize without change in window dimensions) to allow a current image to remain at its size while zooming in/out. When the window dimensions change (desktop shrink/expand the window) the entire box will be resized. This change is easy to implement (once all code parts are identified) in the non-minimized jquery code, and the jquery can again be minimized. Some series of this will be provided in the updated plugin with a version number indicating that there were modifications made away from the author's provided code. I'm thinking that perhaps that additional resize on window resize may be a feature controllable in the admin with the default of it auto-resizing on screen size change. Me personally, when I'm on a desktop and shrink the window to make space to see something else while the image is displayed, I'd rather the image stay the same size so it is easily viewable. But that isn't strictly responsive in nature. Perhaps an option switch could be added for the user to select/control that, but that is just another development feature to consider.

Regarding possible future changes to this plugin.
It is not language-friendly as implemented.
I would suggest that the slideshow start/stop texts are moved out of the admin and into a language file along with new constants to use with the jscript override options in includes/classes/zen_colorbox/options.php
for these texts.

slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",

documentation
The readme is a bit minimal.
I would add links to this thread and a much more prominent mention that the original authors page has a great deal of useful information there.
A note to point out that the jscript plugin offers many options which can be overridden by placing the same parameters/options in this file:
includes/classes/zen_colorbox/options.php

Agree that more ZC standard and capability could be incorporated. Thank you for identifying areas of consideration. A lot was done to the files from the previous version to support html validation and some restructuring. Wanted to do more at the time, but also wanted to keep the functionality present and available.

The reference to the author's instruction would likely reduce similar questions in the forum so yes also to be incorporated in the near future.

Thank you.