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

【问题标题】：How can I dynamically resize the jQuery Colorbox plugin?如何动态调整 jQuery Colorbox 插件的大小？
【发布时间】：2009-06-29 21:32:10
【问题描述】：

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

这是一个链接，有人说你可以在加载后再次调用 colorbox()，但我不知道该怎么做：

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

【问题讨论】：

标签： jquery colorbox

【解决方案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});

});

【讨论】：

一个小修正：parent.$.colorbox.resize({width:y, height:x}) （你忘了宽和高之间的逗号）
再修正：{innerWidth:x, innerHeight:y} 可能会更好。
要自动调整大小，只需使用 $.fn.colorbox.resize({});
谢谢！您的代码有效，但您混淆了 x 和 y。请改用 w 和 h。

【解决方案2】：

在 Colorbox 1.3 中，您现在可以调用 resize 函数：

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

【讨论】：

这并不总是有效的。例如使用 iframe 拉入外部 .net 页面时
查看 github.com/whoshotjr/jQuery-Colorbox-iFrame-resize 了解 iframe 大小调整

【解决方案3】：

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

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

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

【讨论】：

这是适合我情况的正确解决方案！就我而言，我只加载一个带有 ajax 的 div，而不是一个带有自己头部的完整页面。无法在 head 标记中添加 javascript...谢谢！！！
更改为 iframe:false 并对我的输出进行了一些更改，效果很好。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

只需将此代码放在iframe 中打开的页面上：

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

【讨论】：

【解决方案7】：

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

【讨论】：

查看 github.com/whoshotjr/jQuery-Colorbox-iFrame-resize 了解 iframe 大小调整

【解决方案8】：

$.colorbox.resize()

如果您碰巧不知道活动颜色框的选择器，这也适用于活动颜色框。

【讨论】：

【解决方案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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

这似乎解决了它：

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

它使用 .length 检查 #colorbox 是否存在，然后检查它是否未隐藏，正如我在 Firebug 中看到的那样，当您关闭颜色框时，它并没有完全删除/销毁，只是隐藏了！

希望这会有所帮助..

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

兄弟们，这个工作正常。

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

【讨论】：

我删除了死链接。