Modal Image Box

1. Introduction and Sample

I got the idea for this script from Lokesh Dhakar's Lightbox script. Of course if I wanted a script that worked exactly that way I'd use that one so my version works slightly differently (also my code is a lot shorter and doesn't have quite as many features).

The basic functionality of this script is that it automatically changes the any links on the current web page that link to images so that those images will display in the current web page rather than loading in a new page. To achieve this effect you only need to add the Javascript and stylesheet to the head of your web page, no changes to the actual links are required.

The script displays the new image centred in the current window with a narrow white surround. The rest of the page is greyed out and will not respond to anything until the person viewing either clicks on the image box or presses the X key on their keyboard. The effect is therefore basically to produce a modal image box over the current page.

The image to the left demonstrates the effect using a thumbnail image linked to a larger image that will display in the modal box. You don't necessarily have to use an image though as any link will work just as well. The effect is automatically applied to all links that have a destination of a gif, jpeg, or png image file.

Most of the original page should still be visible through the transparent grey background however because some browsers insist on displaying select lists, flash, and/or iframes in front of anything else all of the select, iframe, and object tag content within the page is completely hidden from view while the modal box is being displayed.

If this is the effect that you want to add to your page then the next step is to obtain the script.