Question

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

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

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

Answer 1

动态调整你想说的颜色框。

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。
完成后，我用图片大小调整颜色框的大小。

没有超时它对我不起作用，因为图片没有完全加载，并且 width = 0，height = 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});
}

Answer 5

resize实际上需要一个jQuery对象并使用它来进行大小调整。相反，您可以像这样重新加载颜色框：

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

Answer 6

只需将此代码放在iframe：

中打开的页面上即可

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

Answer 7

据我所知，带iframe: true的彩盒无法调整大小。 iframe: false的颜色只能调整高度（使用jQuery.fn.colorbox.resize()）。

Answer 8

$.colorbox.resize()

如果你不碰巧知道活动彩盒的选择器，这也适用于活动彩盒。

Answer 9

所以，这是另一种可能非常容易实现的解决方案（虽然它适用于您正在调用的所有彩盒，因此根据您的情况，它可能不是最好的）。如果这适合您，您只需将代码拖放到代码中的任何位置，它就会自动运行。 HEIGHT_PERCENTAGE和WIDTH_PERCENTAGE值可以设置窗口相对于整个窗口大小调整大小的大小。您可以添加一些其他值来创建最小尺寸等。

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

此答案的部分内容改编自：https://stackoverflow.com/a/3012772/1963978

Answer 10

好吧，我之前没有使用过Colorbox，但是我使用过类似的东西，如果我理解正确的话，你需要做的就是在加载完东西之后改变盒子的样式。

如果您发现哪些id / class值应用于Colorbox，您可以使其在加载AJAX内容时调用一个函数来更改Colorbox相应部分的样式。

Answer 11

您可以在它提供的回调函数中调用它：

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

Answer 12

克里斯的回答让我走到了一半，但它在IE7 / 8中引起了一个巨大的错误，因为它会在每次窗口调整大小时调用该函数，甚至奇怪地在一些导致回发的asp.net按钮上？！？！即使没有活动的彩盒。

这似乎可以解决它：

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

它检查#colorbox是否存在使用.length，然后检查它是否隐藏哪个技巧就像我在Firebug中看到的那样，当你关闭彩色盒时它没有完全删除/破坏只是隐藏！

希望这会有所帮助..

Answer 13

如果您可以在iframe中检测内容的高度/宽度，则可以这样做，然后您可以使用colorbox.resize（）函数再次调整颜色框的大小。

Answer 14

不确定您在寻找什么但我在寻求自己的解决方案时找到了这个帖子。我在iframe模式下有一个colorbox。在那里有一个按钮，当点击时，需要用新的颜色框替换当前的颜色框。我这样做......

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

这会将新页面重新加载到同一位置的新颜色框中，并且过渡非常顺利。

Answer 15

这个兄弟正在努力工作。

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

Answer 16

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

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

16 个答案: