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

A solution I found on the Drupal site uses Colorbox's OFF function:

if (window.matchMedia) {
    // Establishing media check
    width700Check = window.matchMedia("(max-width: 700px)");
    if (width700Check.matches){
        $.colorbox.remove();
    }
}

You would need to re-initiate colorbox over a certain window size.

Answer 2

I've made this in CSS for youtube video box, but take care, it could cut some vertical images.

@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}

Answer 3

This is the solution that worked for me, I took out the timer stuff that was originally posted by Shabith.

    /**
     * Auto Re-Size function
     */
    function resizeColorBox()
    {
        if (jQuery('#cboxOverlay').is(':visible')) {
            jQuery.colorbox.resize({width:'100%', height:'100%'});
        }
    }

    // Resize Colorbox when resizing window or changing mobile device orientation
    jQuery(window).resize(resizeColorBox);
    window.addEventListener("orientationchange", resizeColorBox, false);

Credits go to: shabith

Answer 4

Answer from owner of colorbox.

window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
    $.colorbox.load(true);
}
}, false);

Answer 5

Add this into your main js file after load the color box related js and jquery lib files.

(function ($, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions 
  $.colorbox.settings.onLoad = function() {
    colorboxResize();
  }

  //Customize colorbox dimensions
  var colorboxResize = function(resize) {
    var width = "90%";
    var height = "90%";

if($(window).width() > 960) { width = "860" }
if($(window).height() > 700) { height = "630" } 

$.colorbox.settings.height = height;
$.colorbox.settings.width = width;

//if window is resized while lightbox open
if(resize) {
  $.colorbox.resize({
    'height': height,
    'width': width
      });
    } 
  }

    //In case of window being resized
  $(window).resize(function() {
    colorboxResize(true);
  });

})(jQuery, this, this.document);

Answer 6

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

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