Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

jQueryFancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

$("#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);
    });
  }
});

In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

19 Comments to “jQuery and Fancybox: How to automatically set the height of an iframe lightbox”

  • Alessandro | |

    After 3 hours searching i finally solved my problem! Thanks for your post.
    Is it possible to do the same with width?

    • Ian Hoar | |

      Hi Alessandro,

      You specify the width to whatever you want it to fit in. I guess you could set the height and then try to figure out the width in order to fit the content. You would have to mess around with it, but the same concept should work.

      • Alessandro | |

        What I was trying to do is something like this:

        ‘onComplete’ : function() {
        $(‘#fancybox-frame’).load(function() {
        $(‘#fancybox-content’).height($(this).contents().find(‘body’).height());
        $(‘#fancybox-content’).width($(this).contents().find(‘body’).width());
        });
        }

        in short to automatically set the height and the width of an iframe lightbox but the code above doesn’t work.

    • ebricca

      for the width it is another identifier

      jQuery(‘#fancybox-wrap’).width(700);

  • Víctor Blasco | |

    Thank you so much!!! It works perfect :)

  • hina

    Thanks for sharing this !
    But it seems not working on Chrome, when the jquery is ‘onComplete’ the fancybox-content resize to 30px

  • Vinayak Kadolkar

    Hi that was Great Solution bu it doesn’t work in Chrome and IE(i know it sucks) Can you give some help in this Matter

  • Igor

    Hi,

    thanks for this great how to!! :)

    I have only one question:

    If I load a iframe which is for example 650px hight. The fancybox starts resizing from the center and after loading it isn’t in the center anymore. How can I center the fancybox after setting the hight?

    Igor

  • Ricardo

    Today I was getting a strange scroll bar, even using your trick. I checked everything again to see if there wasnt anything wrongly. There wasn’t. I only got rid of the scrollbar when applying padding and margin with 0 values to the iframe body (Im loading an HTML file inside it).

    Cheers! And thank you, none the less.

  • Luis Andrade

    Dear Ian Hoar

    You saved my time with this great solution. After searching a lot of time i found your contribution.
    I included this line to achieve my necessities:
    ‘onStart’ : function() {
    $(“#fancybox-outer”).css(‘margin’, ‘-10px 0px 0px 0px’);
    },

    Using PHP you could escape the apostrophe. You escape a character by typing a “slash” before:
    \’onStart\’ : function() {
    $(“#fancybox-outer”).css(\’margin\’, \’-10px 0px 0px 0px\’);
    }

    Thank you so much, for sharing!

  • Ed

    Hi,

    I am a newbie with JS but I have the same problem. Where exactly should I paste the code provided? On the .js file, the parent page, the iframe page? Do I need to make changes to the links that open the iframe?

    Any help will be really appreciated.

    Thanks,

    E.

    • Ian Hoar | |

      Hi Ed,

      The code is used where you initialize Fancybox. It’s done in the anonymous function in the onComplete option.

      • Aysha

        Hi

        I am using this to set the fancybox iframe dynamically based on its content. and it works fine in Chrome and FF. But in IE, it remains the same height as the first time load. Any ideas how can this be fixed for IE ?

        Cheers

  • Arnoud

    Great solution for dynamic heights, thanks for sharing!
    However I’m running into 2 problems:
    1. Fancybox isn’t centered anymore.
    2. Fancybox is too high in Chrome and IE8+9 (FF and IE7 are fine).
    There’s like 100px whitespace in my Fancyboxes.

    Would be great if this can be solved, any ideas?

  • kevin

    Thank you so much!!! It works perfect

  • Stacie

    Been googling this for hours and this is the only article I’ve found that helped!
    Thank you thank you thank you!

  • Zsygab

    Thanks, it worked well!

Responses:

Your comments are important, join the conversation