making all images responsive using jQuery

mansour · Post by **mansour** » Sun Feb 10, 2019 1:34 pm

Hi all,
I'm using PHPmaker 2019, This great product shows multiple images as an image gallery. The problem is that these images are NOT responsive. I checked the codes. It seems the gallery uses the "cboxPhoto" class. How to make all images responsive using jQuery?

Any idea?
Thank You
Mansour

arbei · Post by **arbei** » Mon Feb 11, 2019 9:43 am

You may try to add Bootstrap class "img-fluid", see: https://getbootstrap.com/docs/4.0/conte ... ive-images.

mansour · Post by **mansour** » Mon Feb 11, 2019 1:54 pm

Hi,
I added the following code to: Global -> Pages with header/footer -> Client Script
// 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);

The problem solved!
Thanks

titanzik · Post by **titanzik** » Tue May 14, 2019 3:08 am

This is brilliant! I used this in my project and it works great!

The it fixed my mobile orientation issue but now what happens is, although the image orientation on mobile is correct, the aspect ratio is still what it was before rotation. Do you know of a way to correct this?

Thanks!