A simple scrollable image gallery
This demo continues from the minimal setup and adds a simple click action to the scrollable items which will open up a larger version of the thumbnail image.standalone demo
The scrollable setup is identical to the minimal setup. Nothing has been modified from that. Here we focus only on the elements that are required for showing the large image. First, we add a container for the image above the scrollable. Here is the HTML:
It's good to give those initial dimensions for the image so that there is no "jumping" on the page and everything stays stable.
We only add styling for the wrapper element:
We add a click handler for the scrollable items. The idea is to load a larger version of the thumbnail image and while the image is loading we apply a simple transparency effect so that the user understands that something is happening.
Our thumbnail images come directly from the www.flickr.com service and the associated larger images are simply the same image URL but without a "_t" substring. You are probably not using flickr, but it's very easy to make another kind of solution. Perhaps you can supply the large image's URL to the "alt" attribute of the thumbnail and get it like this:
If you want to have more syntactically correct pages, you might want to enclose your thumbnail images with a tags and supply the large image's url in the href attribute and maybe add some image description to the title attribute. In that case you can have the interesting opportunity to add a tooltip for scrollable items.
It is fairly easy to change the setup so that the thumbnail images will load entire HTML pages with AJAX. This could result in some good user interfaces.