Responsive Colorbox

Thanks for that, it was quite easy to change it but why the author put “false” originally? a percentage should be set by default.

Thanks mate… Works Like Charm….!

I added the following snippet in my header. It does the same but doesn’t require to hack the code of the plugin. It also handles resizing and mobile device orientation change.

<script type="text/javascript">
	// 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.load(true);
				}
		}, 300);
	}

	// Resize ColorBox when resizing window or changing mobile device orientation
	jQuery(window).resize(resizeColorBox);
	window.addEventListener("orientationchange", resizeColorBox, false);
</script>

Is there a way this can be applied to jquery.lightbox.js?

Thank you nicolas.bernier! This is awesome, it helped me a lot!

Really great code.Helped me a lot.Very much thanks nicolas.bernier……

No Coding needed.

Just go into Lightbox ColorBox Plus settings > Primary Settings > Size and set the maximum width Field to 100%

works like a charm

Thanks – for dummies like me, don’t forget the quotes “100%” and set the lightbox size to ‘large’ in the settings for Lightbox Gallery.

In case that you would like to set the default lightbox size:
thumbnail medium large full

This doesn’t work for me. Changing ‘maxWidth’ and ‘maxHeight’ to 100% doesn’t work. Setting 100% as the maximum height and width in the plugin settings doesn’t work so I’m a bit bewildered.

I have a responsive image slider that pops up in colorbox. On it’s own, the image slider is 100% responsive on my site however as soon as I add it into a colorbox, the size doesn’t change/adapt.

So the issue must be colorbox.

Anyone got any ideas?