Dynamic Galleries with DOM and CSS

The gallery we are about to create should have the following features: 

• Clean, simple markup – The HTML developer should not need to add any extra information for our gallery to work.
  
  
• Full accessibility – Users without Javascript should simply get the linked picture displayed in the browser. 

In order to make scripts work without inline event calls, we need to use the Document Object Model (DOM) to reach what we want to enhance. To avoid extensive searching in the document, we wrap our gallery in an element with a certain ID, for example “thumbs.”  Each thumbnail will be contained in its own DIV, to allow for captions, should we want them, and is linked to the main image. 

<div id=”thumbs”>

    <div>

<a href="images/archway.jpg"><img src="images/tn_archway.jpg" alt="Archway with natural green roof" /></a>

</div>

</div> 

You might wonder why we don’t use a table for a thumbnail gallery, as technically a gallery with captions could be seen as tabular data. Furthermore a table degrades as a grid layout in non-CSS capable browsers, and our example shows up as one thumb under the other in those. The reason is that it is easier to maintain, renders faster and could be designed as liquid, something you cannot do with a table.

The script we are about to create can take both, so if you feel more comfortable using tables, go for it. 

In terms of accessibility, our example is perfectly acceptable. The nature of thumbnail galleries makes them not much use to blind or text browser users, but by giving the thumbnails a proper alternative text, even those users know what is linked. We could add a title to the links stating that it links to an image, though. Keyboard users have no problem with the gallery either –- they can tab from link to link (or press A in Opera), and hit enter to load the image. Pressing “Ctrl + Cursor Left” gets them back to the gallery.