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

Answer 2

I tried many of the solutions here but the following from @berardig on github worked really well for me

var cboxOptions = {
  width: '95%',
  height: '95%',
  maxWidth: '960px',
  maxHeight: '960px',
}

$('.cbox-link').colorbox(cboxOptions);

$(window).resize(function(){
    $.colorbox.resize({
      width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
      height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
    });
});

Source: https://github.com/jackmoore/colorbox/issues/183#issuecomment-42039671

Answer 3

Looks like this issue has been discussed and working solutions offered on the author's github

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