如何动态调整 jQuery Colorbox 插件的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1060687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I dynamically resize the jQuery Colorbox plugin?
提问by James Skidmore
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?
Colorbox 中加载的 AJAX 内容包含一些 JavaScript，可以调整内容中的内容。Colorbox 根据所有 AJAX 发生之前的大小确定其大小。如何在加载内容后调整 Colorbox 的大小？
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:
这是一个链接，有人说您可以在加载后再次调用 colorbox() ，但我不知道该怎么做：
http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0
http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0
采纳答案by James Skidmore
In Colorbox 1.3, you can now call the resize function:
在 Colorbox 1.3 中，您现在可以调用调整大小函数：
$('.item').colorbox.resize();
回答by user573434
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.
如果您想调整加载 Iframe 的颜色框的大小，您可以在目标文档的头部添加类似这样的内容。
$(document).ready(function(){
var x = $('mydiv').width();
var y = $('mydiv').height();
parent.$.colorbox.resize({width:x, height:y});
});
回答by Jason
When you invoke the colorbox, simply add an onCompletefunction to it, eg
当您调用颜色框时，只需向其添加一个onComplete函数，例如
$('.mycolorboxes').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
Therefore each time content is loaded within the colorbox, it kicks off its resize function.
因此，每次在 colorbox 中加载内容时，它都会启动其调整大小功能。
回答by Svetlana
I needed to use setTimeoutmethod 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.
我需要使用setTimeout方法来为我调整大小。
我通过ajax调用获取图片，等待2秒并为这张图片设置颜色框。
完成后，我用图片大小调整颜色框的大小。
Without timeout it didn't work for me because picture wasn't loaded completly and a got width=0, height=0as picture's size.
没有超时它对我不起作用，因为图片没有完全加载并且宽度= 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});
}
回答by Rafael Caviquioli
Just put this code on the page that opens in the iframe:
只需将此代码放在在以下位置打开的页面上iframe：
$(document).ready(function() {
parent.$.fn.colorbox.resize({
innerWidth: $(document).width(),
innerHeight: $(document).height()
});
});
回答by Chris
resize actually takes a jQuery object and uses that to do the resizing. Instead, you can just have the colorbox reload like this:
resize 实际上需要一个 jQuery 对象并使用它来调整大小。相反，您可以像这样重新加载颜色框：
$(window).resize(function(){
$.fn.colorbox.load();
});
回答by Mayur bhalgama
As I know, colorbox with iframe: true, cannot be resized. Color with iframe: falsecan resize height only (using jQuery.fn.colorbox.resize()).
据我所知，带有 , 的颜色框iframe: true无法调整大小。颜色 withiframe: false只能调整高度（使用jQuery.fn.colorbox.resize()）。
回答by Scott
$.colorbox.resize()
This will also work on the active colorbox if you don't happen to know the selector for the active colorbox.
如果您不知道活动颜色框的选择器，这也适用于活动颜色框。
回答by matthewsheets
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.
因此，这是另一个非常容易实现的可能解决方案（尽管它适用于您正在调用的所有颜色框，因此根据您的情况，它可能不是最好的）。如果这对您有用，您基本上可以将代码拖放到代码中的任何位置，它就会自动工作。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');
});
Part of this answer is adapted from: https://stackoverflow.com/a/3012772/1963978
此答案的一部分改编自：https: //stackoverflow.com/a/3012772/1963978
回答by Doug Wolfgram
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...
不确定您在寻找什么，但我在寻求自己的解决方案时发现了这个线程。我在 iframe 模式下有一个颜色框。那里有一个按钮，点击后需要用新的颜色框替换当前的颜色框。我就是这样做...
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.
这会将新页面重新加载到同一位置的新颜色框中，并且过渡非常平滑。
