Fancybox - Updating fancybox size with iframe content?

Question

On my site, I open a fancybox containing IFRAME content. Is it possible to update the fancybox size when clicking a link in it?

For example, I first set the width to 535 pixels, when a specific link clicked, I would like the fancybox to change to a width of 900 pixels.

Any idea how I can achieve this?

Thanks!

Answer 1

I think I have the same problem and in my case fancybox.resize does not work, but this worked for me:

$("#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 height $('#fancybox-content').height($(this).contents().find('body').height()+30); }); } }); 

Credit to Jan Hoar to post it here: http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox /

Answer 2

For those who can come here with Fancybox 2:

This is the code that worked for me

 $(".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; }); }); 

If you click 'a' in your iframe, events will be blocked by default. Instead, we change the src of your iframe. When it is loaded, # .fancybox.resize will automatically resize the fancybox in relation to the content. This is an idea, so the code probably isn't working yet. Just to help you get on the right track.

Answer 4

This works for me on fancyBox v2.1.4

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