How can I dynamically resize the jQuery Colorbox plugin?

Question

The AJAX content loaded in a Colorbox has some JavaScript included that resizes things within the content. Colorbox determines its sizing based on the sizes before all of th

Answer 1

So, here's another possible solution that is really easy to implement (though it will work on all colorboxes that you're calling, so depending on your situation it might not be the best). If this works for you, you can just drag and drop the code basically anywhere in your code and it will work automatically. The HEIGHT_PERCENTAGE and WIDTH_PERCENTAGE values are so that you can set how large the window will resize to relative to the overall window size. You could add some other values to create minimum sizes, etc.

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

Part of this answer is adapted from: https://stackoverflow.com/a/3012772/1963978

Answer 2

Well, I haven't used Colorbox before but I have used similar things, and if I understand correctly, what you need it to do is change the style of the box after something's been loaded.

If you find what id/class values are applied to the Colorbox, you could make it so that when the AJAX content is loaded, a function is called to change the style of the appropriate part of the Colorbox.

Answer 3

$(window).resize(function(){    
        $.colorbox.resize({
            maxWidth:"auto",
            width:95+'%',
        });
});

Answer 4

I needed to use setTimeout method to made resizing work for me.
I do ajax call to get a picture, wait for 2 sec and set colorbox for this picture.
On complete I resize the colorbox with picture size.

Without timeout it didn't work for me because picture wasn't loaded completly and a got width=0, height=0 as picture's size.

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}

Answer 5

Not sure what you are looking for but I found this thread while on a quest for my own solution. I have a colorbox in iframe mode. There is a button in there that when clicked, needs to replace the current colorbox with a new one. I just do this...

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

This reloads a new page into a new colorbox in the same location and the transition is very smooth.

Answer 6

When you invoke the colorbox, simply add an onComplete function to it, eg

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

Therefore each time content is loaded within the colorbox, it kicks off its resize function.