Dynamic Galleries with DOM and CSS - Basic Functionality of a Thumbnail Gallery
(Page 2 of 8 )
Let’s take a step back and look at what a thumbnail gallery should do for us. First, it should give us thumbnails -- small images that load fast and get cached to give us an overview of all the images available.
It should be common sense, but thumbnails should be small both in physical size and file size. Thumbnail galleries are there to give users with a slow connection a preview of the images, not to force them to load the full images alongside.
There are Javascript and CSS “no preload” galleries on the Web that violate exactly that idea. Resizing images via CSS, Javascript or deprecated HTML attributes is not a clever idea, no matter how you cut it. It simply means that a visitor needs to load the entire gallery if she wants to see only selected images.
The thumbnails should give a good impression of what the image is and provide proper alternative text for accessibility reasons; these texts act as a fallback should images not be available. We could also provide the visitor with information about the dimension and file size of the big picture.
The thumbnails should link to big images which get opened in the same browser, and -- when it comes to generated or dynamic galleries -- provide a link back to the thumbnails. Really usable galleries also have links to the next and previous images and tell the visitor how many more are in this album.
Next: Old School Dynamic Galleries >>
More Style Sheets Articles
More By Chris Heilmann
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 22 
