Lightbox to display images
By specializing the lightbox to show only pictures, it is possible to obtain a simpler code.
The code has been tested under Firefox 2, Internet Explorer 7, Opera 9 and Safari 3. The rendering is a little different. Under Firefox and Safari, the text appears below the image, it is within the frame with other browsers.
The HTML code simplified
Compared to the universal and dynamic lightbox the code was very simplified.
We can remove the close button because the user has just to click on the image to close the box.
This was obviously not possible when it contains a text with links or a form...
<div id="shadowing"> <div id="box"> <div id="boxcontent" onclick="closebox()"> </div> <div id="boxtitle"> Name of the image</div> </div>
The title containing the name of the image has also been placed at the bottom
of the box.
The onclick event is now associated with the contents.
In the CSS code have been removed descriptors for <div> no longer used, and are changed (that is an option) the position of boxtitle and boxcontent.
<link type="text/css" rel="stylesheet" href="lightbox-image.css">
To display an image into the lightbox, click on the corresponding thumbnail...
- Lightbox for images. Archive holding the script and the demo.