lightbox js overlay over whole page and centrally

Question

currently redoing a gallery for a client at

www.stagecraft.co.uk/gallery.html

but i'm getting problems with my overlay.i want is it's in the middle and on top (brought to the front) of any divs that are in view as newer images, when i get them from client, will be much bigger.

any ideas greatly appreciated. or is there a better lightbox jquery plugin out there that i've not found yet..

thanks in advance

Stu

Answer 1

Use...

var ScreenHeight = $(document).height();  
var ScreenkWidth = $(window).width(); 

To get the screen size for the overlay. Then to center the box...

var winH = $(window).height();  
var winW = $(window).width();  

$('selector').css('top',  winH/2-$(id).height()/2);  
$('selector').css('left', winW/2-$(id).width()/2);  

Which will center the box.

Quite a commonly used method found across the internet

Answer 2

I almost always use this jquery plugin, by Leandro Vieira Pinho, its brilliant :)

I've never had a problem with its positioning, or anything thing else for that matter, easy to implement too!

Answer 3

This is my jQuery lightbox of choice: Slimbox 2