Fancybox 2高度不起作用 [英] Fancybox 2 Height not working

问题描述

我试图根据客户单击的链接从fancybox中获得两个不同的高度，但是由于某种原因，该高度一直保持在100％.不会达到我想要的高度

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

这是我的代码

$('.fancyboxhd').fancybox({
  width: 1287,
  height: 720
});
$('.fancyboxsd').fancybox({
  width: 640,
  height: 360,
});

这是iFrame内容

推荐答案

(请参见下面的编辑以获取改进的答案)

(see edit below for an improved answer)

对于iframe内容，您的html应该看起来像

For iframe content, your html should look like

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

###编辑### :(2013年9月5日)

### EDIT ### : (Sep 05, 2013)

可以使用锚点中的​​(HTML5)data-*属性和两个选项(如

)使用相同的class来改进和简化代码:

The code can be improved and simplified using (HTML5) data-* attributes in the anchors and the same class for both options like :

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

$('.fancybox').fancybox({
    fitToView: false,
    autoSize: false,
    afterLoad: function () {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});

请参见 JSFIDDLE

See JSFIDDLE

注意:在进行此编辑时，演示使用了fancybox v2.1.5.

NOTE: At the time of this edit, demo used fancybox v2.1.5.

这篇关于Fancybox 2高度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！