jquery - Fancybox 2 高度不起作用

Question

我试图根据客户端点击的链接从 fancybox 中获取两个不同的高度，但由于某种原因，高度一直保持在 100%。达不到我想要的高度

这是我的代码

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

这是一个 iFrame 内容

Answer 1

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

对于 iframe 内容，您的 html 应如下所示

<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a>
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a>

然后将这两个选项添加到您的脚本中

fitToView   : false,
autoSize    : false

所以你的脚本应该看起来像

$(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 日)

可以使用 anchor 中的​​ (HTML5) data-* 属性以及两个选项的相同 class 来改进和简化代码，例如:

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

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