how to make colorbox responsive

Question

I am using colorbox in a responsive website.

I have a request : I wish that Colorbox automatically adjusts itself to the size and orientation of the screen / mobile devi

Answer 1

I solved it using the maxWidth and maxHeight options on colorbox initialization, as explained on the developer's website :

jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'});

You can also add this snippet to resize the colorbox when resizing the window or changing your mobile device's orientation :

/* 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);

Eventually, replace jQuery by $ .