fancybox v2 iframe 高度调整大小

Posted 2023-05-09

【中文标题】fancybox v2 iframe 高度调整大小

【英文标题】：fancybox v2 iframe height resize

【发布时间】：2014-05-19 02:04:37

【问题描述】：

有没有办法让下面的脚本只适用于fancybox中的iframe？我有一个包含画廊和 iframe 的页面。我希望 iframe 具有不同的高度而不影响图像大小。

$('.fancybox').fancybox(
afterLoad: function () 
    this.width = $(this.element).data("width");
    this.height = $(this.element).data("height");

);

【参考方案1】：

在将data-* 值传递给fancybox 之前，您可以设置一个条件来验证内容的type，例如：

$(".fancybox").fancybox(
    afterLoad: function () 
        if (this.type == "iframe") 
            this.width = $(this.element).data("width");
            this.height = $(this.element).data("height");
        ;
    
);

JSFIDDLE

---

您也可以参考$(this)，如this.element

$(".fancybox").fancybox(
    afterLoad: function () 
        if (this.type == "iframe") 
            this.width = this.element.data("width");
            this.height = this.element.data("height");
        ;
    
);

JSFIDDLE

【参考方案2】：

这段代码对我有用！

$.fancybox.open(
        maxWidth: 1263,
        // fitToView: true,
        width: '90%',
        // maxHeight: 292,
        autoSize: false,
        closeClick: false,
        openEffect: 'elastic',
        closeBtn: true,
        closeEffect: 'elastic',
        href: '/team/' + $(this).data("cv") + '_team.html',
        type: 'iframe',
        'afterShow': function() 
          $(".fancybox-wrap").height($(".fancybox-iframe").contents().find("html").height() + 30);
          $(".fancybox-skin").height($(".fancybox-iframe").contents().find("html").height());
          $(".fancybox-inner").height($(".fancybox-iframe").contents().find("html").height());
        
    );