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 set to 535px width initially, when a specific link is clicked I'd like the fancybox to resize to 900px width.

Any idea how I can achieve this?

Thanks!

Answer 1

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 2

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'
                });