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 device : if I change the orientation of the screen / mobile device (ie if I rotate my mobile to adjust horizontal and vertival pictures to the screen size, I wish that Colorbor automatically adjusts itself to the new size / orientation of the screen). for now, Colorbox only automatically adjusts itself on load of a new picture (in a slideshow for exemple).

I asked the question in the closed google group :

https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr

I created two feature requests on github :

https://github.com/jackmoore/colorbox/issues/158

but I don't have any response, so I try on Stack Overflow...

Does anyone know if it's possible to get ColorBox to auto-resize based on orientation change (maybe with a callback function in a workaround)?

Thanks in advance to any help.

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