[Plugin: NextGEN Gallery ColorBoxer] Colorbox image size

Hi aralelatina,

Thanks for using NextGEN Gallery ColorBoxer!

There is indeed a way to resize your images automatically. Whereas Fancybox does it by default, ColorBox requires “maxWidth” and “maxHeight” attributes to define the size of the resize. These attributes accept either pixel or percent values, and I find setting both at 90% of the viewport looks best.

Near the top of nextgen-gallery-colorboxer-scripts-and-styles.php in the plugin’s folder, simply replace the “colorbox inline js” section with the following…

/**********************************************************************
* colorbox inline js
**********************************************************************/

function nggcb_colorbox_inline_js() {
    global $nggcb_options;

	$nggcb_colorbox_script = '<!-- [nextgen gallery colorboxer] This page must contain a gallery...else we wouldn\'t be serving colorbox\'s scripts and styles -->';
	$nggcb_colorbox_script .= "\n";
	$nggcb_colorbox_script .= '<script type=\'text/javascript\'>';
	$nggcb_colorbox_script .= 'jQuery(document).ready(function($) { jQuery(\'a.mycolorbox\')';
	$nggcb_colorbox_script .= '.colorbox({ opacity:' . $nggcb_options['colorbox_opacity'] . ', ';

	$nggcb_colorbox_script .= 'maxWidth:"90%", ';
	$nggcb_colorbox_script .= 'maxHeight:"90%", ';

	$nggcb_colorbox_script .= 'transition:"' . $nggcb_options['colorbox_transition'] . '" }); });</script>';
	$nggcb_colorbox_script .= "\n";

	echo $nggcb_colorbox_script;

} // close nggcb_colorbox_inline_js

I’ll have to add this option to a future version, but I hope this helps for now.

Cheers,
Mark.

PERFECT!!!
Thank you. So far I am have great success with this plugin.

Hi Mark,

Could you tell me does this mean that smaller images will be upsized to fit the screen? This is not desirable. Ideally, I would like to shrink images if bigger than the browser window but not enlarge them beyond their maximum dimensions if the window is larger than the image. It would also be great if there is a minimum size value because sometimes there is just no point to show and image any smaller.

Do you know how I can achieve the above?

@ ibeedug…

That’s great to hear! I’m glad I could help ??

@ l2oBiN…

The modification above does not scale up images that are smaller than the screen size, it simply scales down large images to fit neatly within your browser window.

In regards to your second question, I’m afraid there are no minWidth or minHeight options in the ColorBox script presently, but I’ll add an additional modification here if they do become available in the future.

Cheers,
Mark.

Hi,
Working good, but for the first picture I click on. It’s not the good proportion.

Here an example of a gallery : https://productiondixcorpsdansent.com/?p=347

It’working good on FireFox but not on Chrome and Safari.

Hi welz101,

Thanks for using NextGEN Gallery ColorBoxer!

I’ve just been looking at your “Edgy” test page (the link above is dead), and I believe I can see what you mean. The second tank image is stretched horizontally.

I’ve been testing your source code, and now have ColorBox displaying and resizing as it should, however there’s a number of things causing this odd behavior…

1. You’ve got much of your header printing twice, including ColorBox’s initialization code. This will need to be addressed. If you go to View –> Source in your browser, you’ll see what I mean.

2. It also appears that some changes you’ve made to the lightbox’s css and js files are causing this stretching too. I’d suggest re-installing the plugin to refresh them.

3. Your theme’s stylesheet has another copy of ColorBox’s styles inside and is causing a conflict. You’ll need to delete everything under the “ColorBox Core Style:” comment. You could probably get rid of all the other lightbox styles too (such as Highslide, etc) if you’re not using them, and doing so will help speed up your site further! You’ll also need to remove the top: -40px; attribute from the body selector at the top of the file, else the lightbox will be cut off at the top.

I hope this helps!

Cheers,
Mark.

Thanks Mark!!
Great plugin by the way!!

Hey welz101,

No worries. I’m happy to help.

Thanks for your kind words also! ??

Cheers,
Mark.

Hi,

I have tried the script modification above as I need the plugin to display images properly on mobile devices. It indeed works better, but the images are not always fitting the size of the screen, sometimes they are much smaller. I would like to enable this plugin only when the screen is of a certain size and disable it otherwise (i.e. for mobiles), would someone know how to to that? (or have the plugin fix the behavior on mobile) Thx.

-oli

to clarify my saying above about images not always fitting the screen, here is an example: say you have a gallery with one image 1024px width and another 800px width. Say you’re looking at it on an iPhone with 320px width. The first image of the gallery (1024px) will be displayed fine and will be resized to fit the width. But the second image (800px) will be displayed proportionally to the first one, that is it will not fir the entire width even though its width is > to the screen width.

The plugin needs to re-evaluate the display size for each image independently based on the current screen width (because device can rotate and change viewport width).