jQuery Fancybox 2 高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10295746/
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
Fancybox 2 Height not working
提问by dpDesignz
I'm trying to get two different heights from my fancybox depending on which link the client clicks on, but for some reason the height just keeps going to 100%. It's not going to the height I'm wanting
我试图根据客户点击的链接从我的fancybox 中获得两个不同的高度，但由于某种原因，高度一直保持为 100%。它不会达到我想要的高度
This is my code
这是我的代码
$('.fancyboxhd').fancybox({
width: 1287,
height: 720
});
$('.fancyboxsd').fancybox({
width: 640,
height: 360,
});
It's an iFrame content
这是一个 iFrame 内容
回答by JFK
(see edit below for an improved answer)
（有关改进的答案，请参阅下面的编辑）
For iframe content, your html should look like
对于 iframe 内容，您的 html 应如下所示
<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a>
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a>
then add these two options to your scripts
然后将这两个选项添加到您的脚本中
fitToView : false,
autoSize : false
so your scripts should look like
所以你的脚本应该看起来像
$(document).ready(function(){
$('.fancyboxhd').fancybox({
width : 1287,
height : 720,
fitToView : false,
autoSize : false
});
$('.fancyboxsd').fancybox({
width: 640,
height: 360,
fitToView : false,
autoSize : false
});
});
### EDIT ###: (Sep 05, 2013)
### 编辑 ###：（2013 年 9 月 5 日）
The code can be improved and simplified using (HTML5) data-*attributes in the anchors and the same classfor both options like :
可以使用data-*锚点中的(HTML5)属性改进和简化代码class，这两个选项也相同，例如：
HTML
HTML
<a class="fancybox fancybox.iframe" data-width="1287" data-height="720" href="hdfile.html">HD</a>
<a class="fancybox fancybox.iframe" data-width="640" data-height="360" href="sdfile.html">SD</a>
JS
JS
$('.fancybox').fancybox({
fitToView: false,
autoSize: false,
afterLoad: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
See JSFIDDLE
NOTE: At the time of this edit, demo used fancybox v2.1.5.
注意：在进行此编辑时，演示使用的是fancybox v2.1.5。
回答by reza.cse08
for v2.1.5 you can use this by using the id of html element.
对于 v2.1.5，您可以通过使用 html 元素的 id 来使用它。
<a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 500x200</a>
<br />
<a id="item2" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 200x500</a>
<div id="test" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.
$(".fancybox-wrap").draggable();
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
type: 'iframe',
autoSize : false,
beforeLoad : function() {
if ($(this.element).attr('id') == 'item1') {
this.width = 500;
this.height = 200;
}
else {
this.width = 200;
this.height = 500;
}
}
});
回答by sandeep kumar
set autoScale : false,
设置自动缩放：假，
$('.fancyboxhd').fancybox({
width: 1287,
height: 720,
autoScale : false,
});
