jQuery and Fancybox: How to automatically set the height of an iframe lightbox
Fancybox 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.
Alessandro | Follow me on Twitter | October 5, 2011 at 2:21 pm
After 3 hours searching i finally solved my problem! Thanks for your post.
Is it possible to do the same with width?
Ian Hoar | Follow me on Twitter | October 5, 2011 at 2:26 pm
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 | Follow me on Twitter | October 5, 2011 at 4:27 pm
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.
Víctor Blasco | Follow me on Twitter | October 27, 2011 at 7:06 am
Thank you so much!!! It works perfect
hina November 3, 2011 at 6:14 am
Thanks for sharing this !
But it seems not working on Chrome, when the jquery is ‘onComplete’ the fancybox-content resize to 30px
javanoob September 24, 2012 at 5:12 am
are you test on local server or live?
I facing same problem when test on local server, but after i live it, its working!
fmaurice | Follow me on Twitter | January 2, 2012 at 7:49 am
Great ! Works perfectly.
Vinayak Kadolkar January 12, 2012 at 3:04 am
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 February 4, 2012 at 7:39 am
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 May 9, 2012 at 2:08 pm
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 July 19, 2012 at 4:17 pm
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 August 9, 2012 at 3:13 pm
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 | Follow me on Twitter | August 9, 2012 at 3:21 pm
Hi Ed,
The code is used where you initialize Fancybox. It’s done in the anonymous function in the onComplete option.
Aysha August 15, 2012 at 9:52 am
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 August 24, 2012 at 6:06 am
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 November 6, 2012 at 1:52 am
Thank you so much!!! It works perfect
Stacie February 20, 2013 at 2:14 pm
Been googling this for hours and this is the only article I’ve found that helped!
Thank you thank you thank you!
Zsygab May 8, 2013 at 7:42 am
Thanks, it worked well!