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

在我的网站上，我打开了一个包含IFRAME内容的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); }); } }); 

感谢Ian Hoar在此发帖： 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的大小。 这是一个想法，因此代码可能还不起作用。 只是为了帮助您走上正确的轨道。

Answer 4

这适用于fancyBox v2.1.4

 $('#myid').fancybox({ closeBtn : false, padding : 0, preload : true, onUpdate : function(){ $.fancybox.update(); } });