Swapping Images from a Gallery
We sometimes want to select an image from some list of images, or gallery, and have it appear full size on the page — all without opening a new page. In the web's dark ages, we did this by targetting a frame. Without going into all the reasons, let's just say that's an idea well past its expiration date. The more modern approach is to move the behavior to its own layer, DOM scripting. For this we use Javascript, as standardized by the ECMA for the core language components and the W3C's DOM standards.
Removing behavior from the HTML and replacing it with Javascript has been rife with poor practice. The developer has intermingled script with the HTML, and even worse, replaced the HTML functionality entirely.
About the Image Swapping Script
This demo will illustrate how to remove behavior entirely from the structure, and how to make the enhancement degrade gracefully for those without javascript or those who have it disabled. The script is taken almost verbatim from Jeremy Keith's book, DOM Scripting — Web Design with Javascript and the Document Object Model. The thumbnail gallery is from my Scrolling Gallery demo.
Interesting Features
You can embed a caption in the thumbnail link that will be displayed with the full-sized image.
For those of you (everybody, I hope) that care about accessibility, the gallery may be navigated by keyboard, and the [Enter] key works the same as a mouse click.
The Image Swap Demo
The number "zero"
