Javascript Fancybox 的宽度和高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7365850/
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
Width and height issue with fancybox
提问by Nima
When I've added this code no setting on width and height works
当我添加此代码时，宽度和高度的设置都不起作用
jQuery(document).ready(function() {
$('a.iframe').fancybox();
});
What are the options to get around it?
有哪些选择可以绕过它？
回答by SBerg413
Take a look at the documentation here: http://fancybox.net/api
看看这里的文档：http: //fancybox.net/api
You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.
您正在使用内联内容，因此请确保将 autoDimensions 选项以及宽度和高度设置设置为 false。
UPDATE:I tested the following solution successfully:
更新：我成功测试了以下解决方案：
$('a.fbtag').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
This assumes that the class name of the link you're opening is 'fbtag'.
这假设您打开的链接的类名是“fbtag”。
回答by dev4u
Fancy Box width and Height always varies with the media type.
Fancy Box 的宽度和高度总是随媒体类型而变化。
If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.
如果我们提供 5 * 5 像素的图像 - Fancy Box 将显示图像尺寸的尺寸。
To counter the effect of media dimensions and define the default width & height for Fancy Box
抵消媒体尺寸的影响并定义 Fancy Box 的默认宽度和高度
Try this:
尝试这个：
$.fancybox.open(collection.toJSON(), {
afterShow :function(){},
maxHeight : 600,
minWidth : 500
});
FancyBox width will be minimum - 500 pixels.
FancyBox 宽度最小 - 500 像素。
FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.
FancyBox 高度将与 FancyBox 数据成比例，最大高度为 600 像素。
回答by d-_-b
For example
例如
$.fancybox({
'content':"This will be the content of the fancybox",
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});
回答by Shaharia Azam
$(document).ready(function() {
$(".fancy-ajax").fancybox({
type: 'ajax',
autoDimensions: false,
'autoSize': false,
'height': 'auto'
});
});
The above codes worked for me. However, I was designing in Twitter Bootstrap.
上面的代码对我有用。但是，我是在 Twitter Bootstrap 中进行设计的。
回答by sandeep kumar
you can do this two way
你可以这样做两种方式
With iframe
使用 iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
type: 'iframe',
href : 'url_here'
});
})
Without iframe
没有 iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
autoDimensions: false,
});
})
