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 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 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 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.
ebricca August 27, 2013 at 2:07 am
for the width it is another identifier
jQuery(‘#fancybox-wrap’).width(700);
Víctor Blasco 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 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 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!
Mohammed June 17, 2014 at 10:36 am
I am having trouble with fancy box pop up when try in mobile devices or resize the browser window to smaller size( like iPad). In such situation pop comes with vertical scrolling cuz the pop content is responsive and for smaller view port it pushed the content to single column layout.
FYI: i am using bootstrap along with fancy box
fpgroups October 21, 2014 at 4:09 pm
Trying to implement this fix but I am having heck of hard time getting it to work – Sure that this is due to my lack of understanding the basic principles of jquery and fancyfox properties.
This is what I have:
$.fancybox({
type : ‘iframe’,
href : url,
afterClose : exitfbox,
closeClick : false,
modal : false,
fitToView : false,
autoSize : false,
width : 560,
onComplete : function() {
$(‘.fancybox-iframe’).load(function() { // wait for frame to load and then gets it’s height
$(‘.fancybox-inner’).height($(this).contents().find(‘body’).height()+30);
});
},
helpers : {
overlay : { closeClick: false, }
}
});
When I view source, layer fancybox-inner defaults to 600px – I know I can simply set height property within the above definition but I want the “dynamic” approach. The layer does not have an ID but a “class” hence the . in lieu of # above.
What am I missing? What must I do?
Thank you all in advance for your assistance!
Will Findlay December 24, 2014 at 12:51 pm
Thanks for posting this! I have long tried to figure out how to overcome the issue where someone’s browser window is too short when opening a lightbox and this code appears to solve this problem by not letting the content get smushed.
Ryan June 28, 2017 at 4:17 pm
I am using the latest update of “Easy FancyBox” plugin for Word Press and cannot get this to work. Hard to believe even after the latest updates iframes still do not fit to the window correctly with the only option being to set the fancybox overlay to be a % height & width of the total browser window. I have literally searched on/off for years to a solution and still have not been able to figure this out…