Zen Colorbox

[keneso]

Hi

On the configuration page there are "initial width", and "initial height", referencing "resize animation", but I don't see it listed, am I missing something? (wouldn't be surprised distracted as I am! )

If Enable Resize Animations is set to true, the lightbox will resize its width from this value to the current image width, when first displayed.

[mc12345678]

Hi

On the configuration page there are "initial width", and "initial height", referencing "resize animation", but I don't see it listed, am I missing something? (wouldn't be surprised distracted as I am! )

There is no "Resize Animation" setting incorporated, although I guess if the Resize Duration were taken to 0 then it would be as if the animation were disabled...

Not sure where the terminology originated as it was in the original distribution as can be seen at least in the github history. (haven't gone back to the original download(s) to see where that terminology may have been inexplicably added). Thing is with the underlying code, there is a default value provided for initialWidth and initialHeight if one is not provided by the code and there is also a default transition "type". That setting could be made to be 'none' which would disable the transition. So, to technically disable the resize animation, either as described the speed would have to go to 0, the initial image size be that of the image(s) being displayed or another option added to the includes/classes/zen_colorbox/options.php file and (as desired) associated install options. The option would be: transition:"none" to be added into the echo'd string.

See, there are other features available with the colorbox code. The plugin offers a "doorway" to integrating it and tries to simplify the organization of the settings and operation. The "instructions" or settings guidance for colorbox can be found here: http://www.jacklmoore.com/colorbox/.

Could all of those settings and options be implemented/integrated into the plugin, sure... Users could also "pick" and choose general options that they wish to implement and incorporate those into that options file. The real question comes of if the feature(s) provided accomplish the desired/intended goal.

[keneso]

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

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