Fancybox - Iframe內容更新fancybox的大小？

Question

在我的網站上，我打開了一個包含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); 
    }); 
    } 
});

信用伊恩灰白色張貼在這裏： http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/

Answer 2

$('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 3

對於那些誰可能來這裏使用的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 4

這對我的作品上的fancybox v2.1.4

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