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

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

Fancybox 3.3.1 automatically resizes the box when the iFrame content is reloaded. The parameter is "preload" and it's default is true.

See https://fancyapps.com/fancybox/3/docs/#iframe.

I tested it and it works but I still get a very short scrollbar in latest Chrome and FF. The update() function seems to calculate the height wrong. It looks like a bug and I posted it in the fancybox Github repository. Unfortunatley the repo is abandoned for a year now.

Answer 5

This works for me on fancyBox v2.1.4

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