How to make colorbox responsive

Worked great for me! Thanks!

Fantastic, thank you!

Amazing work...!

Thanks !

If you need to resize a video that is in a iframe, add this code after $.colorbox.settings.width = width;

   if($('iframe')[0]){
        $('iframe')[0].setAttribute("width", $("#colorbox").css("width").replace(/[^-\d\.]/g, '') - 40 + "px");
        $('iframe')[0].setAttribute("height", ($("#colorbox").css("width").replace(/[^-\d\.]/g, '')*360/640) + 36 + "px");
   }

I had videos and images with picture, so at the end I made this

(function ($, Drupal, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
  $.colorbox.settings.onLoad = function() {
    colorboxResize();
  }
  //Customize colorbox dimensions
  //por defecto 640x360
  var colorboxResize = function(resize) {
    var width ; var height;
    //for video
    if($("#cboxLoadedContent >div").hasClass("embedded-video")){
    width = "90%";
    height = "90%";
    if($(window).width() > 960) { width = "860"; }
    if($(window).height() > 700) { height = "630"; }
    
  }else{ //for image with picture
     width = $("#cboxLoadedContent img").width;
     height =  $("#cboxLoadedContent img").height;
  }
        $.colorbox.settings.height = height;
        $.colorbox.settings.width = width;

    //if window is resized while lightbox open
    if(resize) {
      //with images it got very slow, so I dont do it
      if($("#cboxLoadedContent >div").hasClass("embedded-video")){
        $.colorbox.resize({
          'height': height,
          'width': width
        });        
      }
      
    }
  };
  //In case of window being resized
  $(window).resize(function() {
    colorboxResize(true);
  });
})(jQuery, Drupal, this, this.document);

Worked great with bootstrap class img-responsive on the img tag. Thanks!

Thanks for sharing this great solution @philpro, worked like a charm and easy to customize of course :)

Hi,

Thanks for this solution. I also noticed that videos inside a colorbox cannot be clickable, it appear that none of the link inside the colorbox works. Anyone having the same issue?

I have a popup-on-load on the homepage of a site, popup renders beautifully in a colorbox, but is not responsive. I tried added the js above (first the top bit, then the version at #5), they do make a difference: first the colorbox popup opens in the old fashioned way, far to big and thus mostly offscreen, then when I press reload page (mobile safari iOS8) it does resize the colorbox, to 90% height and 90% width. However hxw of the screen, not of the image in the popup! So my landscape image is now stretched being recognition to a portrait one..

Thanks, @philpro. The code works when colorbox modal is already open and then resizing window. However, if there is a gallery of multiple pictures, clicking to the next picture causes the colorbox popup to resize to the original larger value. Only resizing the window will cause the colorbox to fit again in the smaller browser window.

Along the same lines, if the browser window starts small, the colorbox popup will only fit when resizing the browser.

Clearly the code only triggers colorbox resize when the browser window is resized. How can I keep the colorbox window at the smaller/resized value when clicking through multiple pictures/objects?

Guys,

where shall I add the code? I am not very experienced user, so a help would be appreciated!

Thanks,

Cheers.

@von_stirliz, it's just a piece of js. Make a js file and name as you like. And refer the js file as other js files.
Thanks @philpro, it's a good tip!

Didn't try it yet, but thanks a lot from me as well!

Wouldn't it make sense to add this to the module's js by default?

For Video it is ok.
Because we can set width/height and make video w100%/ h100% ...

But for Images it is trouble. In this code we have to set certain width/height. And it is bad.

If it gallery and you click next/previous then colorbox will understand what w/h inside and adapted container for image.

Somebody know how to resize colorbox by imitation next/previous buttons click?
To resize colorbox without certain width/height.

(for example here setting certain W/H
var width = "90%";
var height = "90%";

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

And I was surprised that colorbox not responsive. So many people using it....

Thanks.

This is working great to keep node content responsive in Colorbox Node module.

Thanks.

Great work philpro, it's worked well for me to play Youtube Video inside colorbox. Why don't you add this as a patch?

Thanks for this.

So is this something that can be added to the js for the colorbox module or do I need to create a js file in my theme and add that file to the .info file?

Worked like a charm! Thanks for the patch.

it's work, thank.

Untested! Please comment if it actually works or not :)

$.colorbox.settings.onLoad = colorboxResize();

$(window).resize(colorboxResize(true));

function colorboxResize(resize) {
  var width = $(window).width() > 842 ? 800 : '95%';
  var height = $(window).height() > 700 ? 630: '95%';

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

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

I am using picture module with colorbox and I tried the js in #22 which didn't seem to work.

I use a picture mapping which maps to the original image and if the original image is larger than the screen it overflows.

By setting a maxWidth attribute on colorbox I had much better results with mobile devices, a value like "95%" works well. It wasn't immediately obvious that maxWidth was necessary.

@HongPong could you elaborate on the maxWidth attribution you mentioned in #24. I'm having trouble with getting the thumbnails on page to be responsive columns and also the expanded/open image not sizing down to fit screen when browser is scaled smaller.

@auxiliaryjoel the maxwidth attribute described here: http://www.jacklmoore.com/colorbox/ is normally false so you have to set it to be active. i think this is a result of the fact colorbox may not be a 'mobile first' solution that automatically works easily with mobile devices. I might be wrong, this was a while ago, but i think that was my issue.

Can anybody apply a patch for this.

Thanks!
Worked for me