Fancybox - Updating size of fancybox with Iframe content?

Question

On my site I open up a fancybox containing IFRAME content. Is it possible to update the size of the fancybox when a link is clicked within it?

For example, I have it

Answer 1

For those who might come here using 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 2

I think I just have the same problem and in my case, fancybox.resize didn't 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's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

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

Answer 3

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

If an 'a' is clicked within your iframe, the default events will be blocked. Instead, we change the src of your iframe. When it's loaded, #.fancybox.resize will automatically resize the fancybox in respect to the content. This is an idea, so the code will probably not yet work. 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();
    }
});