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

Call this on window resize and/or "orientationchange" Where 960 is the preferred width for my colorbox, and my maxWidth = 95%

var myWidth = 960, percentageWidth = .95;       
if ($('#cboxOverlay').is(':visible')) {         
    $.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
    $('.cboxPhoto').css( {
        width: $('#cboxLoadedContent').innerWidth(),
        height: 'auto'
    });
    $('#cboxLoadedContent').height( $('.cboxPhoto').height() );
    $.colorbox.resize();

}

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

Before colorbox js lock, insert the following code:

jQuery.colorbox.settings.maxWidth  = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

var resizeTimer;
function resizeColorBox()
  {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
              if (jQuery('#cboxOverlay').is(':visible')) {
                      jQuery.colorbox.load(true);
              }
      }, 300);
  }
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

Leave left, right, bottom and top with value 'false' and it will do the calculation automatically. It worked for me so I'm going over!

Answer 4

I would like to add an answer here. I had a requirement to make the colorbox responsive by respecting different breakpoint widths and change the width of the popover based on window width. Basically, I can afford to have empty spaces to the left and right of the colorbox when it is displayed in a browser but not when it is displayed in a phone / tablet.

I have used the concept of an answer from this very post (https://stackoverflow.com/a/23431190/260665) but made few modifications:

/**
 * Raj: Used basic source from here: https://stackoverflow.com/a/23431190/260665
 **/

// Make sure the options are sorted in descending order of their breakpoint widths
var cboxDefaultOptions = 
        [   
            {
                breakpointMinWidth: 1024,
                values: {
                    width : '70%',
                    maxWidth : '700px',
                }
            },
            {
                breakpointMinWidth: 640,
                values: {
                    width : '80%',
                    maxWidth : '500px',
                }
            },
            {
                breakpointMinWidth: 320,
                values: {
                    width : '95%',
                    maxWidth : '300px',
                }
            }
        ];

$(window).resize(function(){
//  alert (JSON.stringify($.colorbox.responsiveOptions));
//  var respOpts = $.colorbox.attr('responsiveOptions');
    var respOpts = $.colorbox.responsiveOptions;
    if (respOpts) {
        var breakpointOptions = breakpointColorboxOptionsForWidth (window.innerWidth);
        if (breakpointOptions) {
            $.colorbox.resize({
                width: window.innerWidth > parseInt(breakpointOptions.values.maxWidth) ? breakpointOptions.values.maxWidth : breakpointOptions.values.width,
              });
        }
    }
});

function breakpointColorboxOptionsForWidth (inWidth) {
    var breakpointOptions = null;
    for (var i=0; i<cboxDefaultOptions.length; i++) {
        var anOption = cboxDefaultOptions[i];
        if (inWidth >= anOption.breakpointMinWidth) {
            breakpointOptions = anOption;
            break;
        }
    }
    return breakpointOptions;
}

Usage:

        $.colorbox.responsiveOptions = cboxDefaultOptions;

When the colorbox object is prepared just add this additional attribute to it. We can also configure cboxDefaultOptions or supply a different custom valued object to $.colorbox.responsiveOptions so that it loads with different breakpoints if needed.

Answer 5

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 6

In the jQuery.colorbox.js file just make this change

line 24:-

maxWidth: "100%",

Don't make any other changes, all will be working fine with all responsive effect :)