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!

score 18 · Accepted Answer · answered Aug 28 '11 at 13:51

18

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/

answered Aug 28 '11 at 13:51

why.you.and.i

497
8
20

10

Fancybox v2-version: ` $('.fancybox').fancybox({ type: 'iframe', afterShow: function() { $('.fancybox-iframe').load(function() { $('.fancybox-inner').height($(this).contents().find('body').height()+30); }); } }); ` – Adrian van Vliet May 03 '12 at 11:51
@AdrianvanVliet Where can i add this code for WordPress plugin of Fancy Box? – Imran Bughio Jun 24 '14 at 11:45

score 3 · Answer 2 · answered Jul 19 '12 at 16:32

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

setting height and width worked for me, even with autoSize: true — obie, Apr 04 '14 at 14:31

score 0 · Answer 3 · answered Mar 22 '11 at 11:06

$('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.

score 0 · Answer 4 · answered Feb 19 '21 at 13:09

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.

score -1 · Answer 5 · answered Apr 04 '13 at 11:02

-1

This works for me on fancyBox v2.1.4

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

answered Apr 04 '13 at 11:02

Andrey

15
1

3

Adding `$.fancybox.update()` to the `onUpdate` event handler will cause an infinite loop that will eat your CPU. Here's an experiement, add a line above `console.log("update triggered");` then using browser console see how many times that is being called... – user692942 Jan 30 '14 at 13:18

Fancybox - Updating size of fancybox with Iframe content?

5 Answers5

Linked