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, Opera and Safari. 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.

The JavaScript code has not changed from the previous version. Two links are included in the page:

<link type="text/css" rel="stylesheet" href="lightbox-image.css">
<script src="lightbox-image.js" type="text/javascript"></script>

The demonstration

To display an image into the lightbox, click on the corresponding thumbnail...

Download...

• Lightbox for images. Archive holding the script and the demo.