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