Lightbox Without Framework
Design of a lightbox
to present images, a message, a form to highlight it by darkening the rest
of the page.
Without Ajax framework, with a few lines of code.
Scripts tested with Firefox, Chrome, Opera, Safari and Konqueror.
Lightbox in CSS
Two <div>
are created, one for the filter that darkens the page, the other as a box
container .
Just some CSS descriptors
are required to create a lightbox.
It plays on the
display:block and display:none properties to display or remove
the box and the filter.
How to change the content
To change the content
of the lightbox at the user request and depending on his choicer, a few
lines of JavaScript must be added.
It includes a title in the bar and insert the content using DOM functions.
Using a lightbox to present images
The lightbox is redefined and simplified for displaying only images, which
is the most common use in fact.
In this case you click on the image to close the box, that simplifies the
design.
Make the lightbox compatible with older browsers
We must make the code more complicated to support legacy browsers.
Lightbox and Ajax: loading asynchronously the content
By adding an Ajax function - without using a framework - we can display images instantly in the box.
Fade in effect
For the lightbox appearing gradually, a fade in effect is added to the previous Ajax version.
A form in a lightbox
Presenting a form in a lightbox, possibly with a fade effect, should alleviate the inconvenience it is to fill it ...