如何动态调整jQuery Colorbox插件的大小？

Question

在Colorbox中加载的AJAX内容包含一些JavaScript,可以调整内容中的内容.Colorbox在所有AJAX发生之前根据大小确定其大小.如何在加载内容后重新调整Colorbox的大小？

这是一个链接,有人说你可以在加载后再次调用colorbox(),但我无法弄清楚如何做到这一点:

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

Answer 1

要动态调整colorbox的大小,你想说.

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

如果要调整加载Iframe的颜色框的大小,可以在目标文档的头部添加类似这样的内容.

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

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

});

Answer 2

在Colorbox 1.3中,您现在可以调用resize函数:

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

Answer 3

当您调用颜色框时,只需向其添加一个onComplete函数,例如

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

因此,每次在彩色框中加载内容时,它都会启动其调整大小功能.

Answer 4

我需要使用setTimeout方法为我调整大小.
我做ajax调用来获取图片,等待2秒并为此图片设置colorbox.
完成后,我用图片大小调整颜色框的大小.

没有超时它对我不起作用,因为图片没有完全加载,并且得到宽度= 0,高度= 0作为图片的大小.

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