Fancybox -使用Iframe内容更新fancybox的大小？

Question

在我的网站上，我打开了一个包含IFRAME内容的fancybox。当单击fancybox中的链接时，是否可以更新fancybox的大小？

例如，我把它的宽度初始设置为535px，当点击一个特定的链接时，我希望fancybox调整到900px的宽度。

你知道我该如何做到这一点吗？

谢谢!

Answer 1

我想我也有同样的问题，在我的例子中，fancybox.resize不起作用，但它对我起作用了：

$("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

感谢伊恩·霍尔在这里发布：http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/

Answer 2

对于那些可能使用Fancybox 2的用户：

这就是为我工作的代码

$(".iframe").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 630,
                    height: 425,
                    fitToView: false,
                    padding: 0,
                    title: this.title,
                    href: $(this).attr('href'),
                    type: 'iframe'
                });

Answer 3

$('a', $('#youriframeID').contentDocument).bind('click', function() {
    preventDefault();
    $('#yourIframeID').attr('src', $(this).attr('href'));
    $('#yourIframeID').load(function() {
        $.fancybox.resize;
    });
});

如果在iframe中单击了'a‘，则默认事件将被阻止。相反，我们更改了iframe的src。加载后，#.fancybox.resize会根据内容自动调整fancybox的大小。这只是一个想法，所以代码可能还不能工作。只是为了帮你走上正轨。