Correcting Overlay Issues with jQuery Lightbox and Fixed Body Width
April 24, 2009This is a quicky.
As plenty know, Lightbox is a convenient and quick solution to providing a slightly glossy gallery effect for a page of photos or artwork. I personally prefer jQuery Lightbox, mainly because I’m a jQuery addict, but there is a slight issue with it being used in sites that have a fixed width on the body element (which I try not to do myself, since who knows what the end-users monitor is going to be like, but for client sites I don’t always have that freedom).
The issue is illustrated in this example here: the dark-background overlay that appears to cover the page doesn’t go past the margin of the body, leaving distracting bright gutters that ruin the desired effect.
In cases where you need (for whatever reason) a fixed body width, the solution here for jQuery Lightbox is fairly straightforward, but involves a wee bit of modification to the jquery.lightbox.js file’s code.
Inside the file, find the _set_interface() function and look for this segment of code:
$('#jquery-overlay').css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: arrPageSizes[0],
height: arrPageSizes[1]
}).fadeIn();
We need to change it to the following:
$('#jquery-overlay').css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: $(window).width(),
height: arrPageSizes[1],
left: -(($(window).width() - $('body').width()) / 2)
}).fadeIn();
Why is this? Let’s focus on the changes.
The width has been changed to $(window).width() so it actually gets the width of the browser window, and not just the body element, across all browsers (the provided value only provides the body element width in IE, Webkit, and Opera). Without this, the overlay won’t get wide enough to cover everything up.
The new value, left, gives the css style that will position the overleft to the left side of the screen by subtracting the difference of the browser’s width and the body’s width. This will allow it to work for all browser sizes.
Lastly, we need to put overflow: visible on the body element in our CSS. With this, we can see the overlay when it goes outside the body’s borders.
With these tiny changes in effect, check out the new result here. Much better, isn’t it?
This was so hugely useful on one of our recent projects for Mindfly. Thanks for posting so I’ll be able to find it later!
thanks a lot…needed this fix
Thank you! It gave me an advice because I had trouble with overlay’s height only in IE 7. In order to fix it I tryed this in _set_interface function and it worked:
$(‘#jquery-overlay’).css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: $(window).width(),
height: (arrPageSizes[1]) * (1.9) // Custom to fix a bug in IE with a bad overlay height background
}).fadeIn();
// instead of
$(‘#jquery-overlay’).css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: $(window).width(),
height: arrPageSizes[1]
}).fadeIn();
YOU ARE SAVING MY BUTT! Thanks A LOT!
:D :D :D
For height issues in ie 6/7 try this….
Note, this was caused because of a bunch of positioned divs.
// get the full hieght of body
var docHeight = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
// Style overlay and show it
$(‘#jquery-overlay’).css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: arrPageSizes[0],
height: docHeight
}).fadeIn();
Do it as well for resize function…
Tested in Chrome, FF, Safari & IE 6-8.. Works like a charm
Thanks, added a bit on to the height to fix our problem
width: $(window).width(),
height: (arrPageSizes[1]) + 160
This helped a million, I couldn’t find any information on this bug and tried to change the overlay for the css to fixed positioning. That resulted in quite a nightmare
Hey Kyle thanks for the tutorial and Dorian thanks for the Height problem (i had the same en IE) but i had a question as well… i used your code for the height problem it works perfectly for IE and Firefox but it doesn’t seem to work on Safari, the overlay is stuck on the top of the page and it’s just about 10px of height… any suggestion ?
Help me please it’s driving me crazy !
(click on a picture to see the problem (problem on SAFARI only) : http://www.luciole.com/travaux/aef/site-test/page/equipe.html)
Thanks !!!
Thanks so much! Looked everywhere for this fix (for IE 8)!
I was looking all over for a fix for this. This looked like it would do it, but unfortunately the problem still exists on FireFox 3.5.7. Any help on this would be greatly appreciated. Thanks
Fantastic~I’m trying to fix another problem with lightbox and need your help. To IE, if the page height > 32767px the opacity won’t “work”, which means you would only see a picture with pure color background. I think we should change “arrPageSizes[1]” to another value, but not sure. If you are not busy could you please send me a mail? Have a nice day :)