Fancybox 2高度不起作用

我试图从我的fancybox中获得两个不同的高度，具体取决于客户点击的链接，但由于某种原因，高度只是保持100％。 它不会达到我想要的高度

这是我的代码

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

这是一个iFrame内容

Answer 1

（ 请参阅下面的编辑以获得改进的答案 ）

对于iframe内容，您的HTML应该是这样的

 hd sd 

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

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

### EDIT ### 🙁 2013年9月5日）

可以使用锚点中的​​（HTML5） data-*属性和两个选项的相同class来改进和简化代码，例如：

HTML

 HD SD 

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。

Answer 2

对于v2.1.5，您可以使用html元素的id来使用它。

 Open 500x200 
 Open 200x500 
 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; } } });