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 the AJAX happens. How can I make the Colorbox resize after the content has been loaded?

Here is a link where someone said that you can call colorbox() again after it's been loaded, but I can't figure out how to do that:

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0

Answer 1

In Colorbox 1.3, you can now call the resize function:

$('.item').colorbox.resize();

Answer 2

To dynamicly resize colorbox you want to say.

colorbox.resize({width:"300px" , height:"300px"})

If you want to resize a color box that loads an Iframe you would add something like this to the head of your target document.

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});

Answer 3

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.

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

resize actually takes a jQuery object and uses that to do the resizing. Instead, you can just have the colorbox reload like this:

$(window).resize(function(){
    $.fn.colorbox.load();
}); 

Answer 6

Just put this code on the page that opens in the iframe:

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});

Answer 7

As I know, colorbox with iframe: true, cannot be resized. Color with iframe: false can resize height only (using jQuery.fn.colorbox.resize()).

Answer 8

$.colorbox.resize()

This will also work on the active colorbox if you don't happen to know the selector for the active colorbox.

Answer 9

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 10

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 11

This Can be done if you can detect the height/width of the content in iframe, then you can use colorbox.resize() function to resize the colorbox again.

Answer 12

You can call it in a callback function it provides:

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});

Answer 13

Chris's answer got me halfway there but it caused a massive error in IE7/8 as it will call that function everytime the window resizes and even strangely on some asp.net buttons that cause a postback?!?! even when there isn't an active colorbox.

This seems to solve it:

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

It checks that #colorbox exists using .length, and then checks that it's not hidden which does the trick as I could see in Firebug that when you close the colorbox it isn't fully removed/destroyed just hidden!

Hope this helps..

Answer 14

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 15

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

Answer 16

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