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/