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

Here is the best solution I ever used on this issue even if you are using CDNs to integrate color-box

in the header where you added your scripts to integrate your color-box just add this before the script start

// Make ColorBox responsive
    jQuery.colorbox.settings.maxWidth  = '95%';
    jQuery.colorbox.settings.maxHeight = '95%';

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

Answer 2

You should consider 'framing' with @media query colorBox css file the same way you'd do with the rest of your css.

Answer 3

My solution, helps when the website is not responsive and you want the colorbox to be visible on mobile devices. I personally use it to store reCaptcha form, so it's obligatory.

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        $.colorbox({reposition: true, top: 0, left: 0, transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
    } else {
        $.colorbox({width:"400px", height:"260px", transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
    }

Answer 4

This one is working properly brothers.

jQuery( document ).ready( function(){
var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
})(); 
$(".group1").colorbox({rel:'group1', width:"80%" }); 
$( window ).resize( function(){
    custom_timeout(function(){
        if( $('#cboxOverlay' ).css( 'visibility' ) ){
            $(".group1").colorbox.resize({ innerWidth:'80%' });
        }
    }, 500 );
}); 

});

Visit demo page