Comments on: Correcting Overlay Issues with jQuery Lightbox and Fixed Body Width

By: Eric

Eric — Wed, 27 Oct 2010 07:55:48 +0000

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 :)

By: Nate

Nate — Tue, 26 Jan 2010 17:29:06 +0000

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

By: Alex

Alex — Thu, 29 Oct 2009 12:37:42 +0000

Thanks so much! Looked everywhere for this fix (for IE 8)!

By: Soja

Soja — Fri, 23 Oct 2009 20:24:56 +0000

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 !!!

By: Charles Brindle

Charles Brindle — Thu, 22 Oct 2009 09:18:12 +0000

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

By: Delazee

Delazee — Fri, 18 Sep 2009 10:47:46 +0000

Thanks, added a bit on to the height to fix our problem
width: $(window).width(),
height: (arrPageSizes[1]) + 160

By: Dorian

Dorian — Fri, 26 Jun 2009 02:50:46 +0000

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

By: mojitopl

mojitopl — Mon, 08 Jun 2009 23:47:55 +0000

YOU ARE SAVING MY BUTT! Thanks A LOT!
:D :D :D

By: Gabriel

Gabriel — Tue, 19 May 2009 09:24:10 +0000

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();

By: nz

nz — Tue, 12 May 2009 17:35:04 +0000

thanks a lot…needed this fix