One thing that bugs me is these lightboxes and the lack of support on forums, you ask about lightboxes and they just link you to lightbox2 or ibox and all this junk which quite frankly is appaling, no one takes the time to explain the process of a lightbox.
My job recently involved constructing a lightbox, after a few days of racking my brains at other scripts I just put them in the trash bin as they where exactly as described trash bloated scripts for something I really dont need that much.
All I wanted was a fixed lightbox, nothing special like floating above the entire site, I wanted to click x and it would bring up some funky box.
So I just started thinking about it and essentially, its just 2 layers 1. your grey overlay and 2. your box you want.
Hopfully you can see with my porley constructed diagram, as you can see layer 1 is under layer 2 but they are both over the website… this really is all you need to keep in your mind.
The design element is just CSS, using z-index and position.
Now around about now your brain will be kicking in… the layer 1 isn’t fixed, right so this we will want to set as position:aboslute; top:0px; left:0px; then we want a background, 50% opacity #000 color .png this is perfect for the overlay (layer1) we can just repeat the background 100% height and width.
z-index, if your a old school css designer you will know this well as it is commonly usedin conjunction with absolute positioning, it allows you to basically say I want layer 2 above layer 1, so layer 2 you will have z-index:2; and on layer 1 you will have z-index:1;.
Once you have understood how the basics work you should be able to figure out the basic javascrip coding behind this, for a basic understanding you could use <a> onclick document.getElementById(layer2).style.display=” document.getElementById(layer1).style.display=” so before hand you will have layer1 and 2 set to display:none; and on clicking it you would then be able to see the lightbox.
Personally I have mixed my lightbox with some jQuery to make it a bit more funky, but from here it really is open doors to what you can do with a lightbox as your not limited by others coding.
