STYLE SHEETS

Dynamic Galleries with DOM and CSS

Thumbnail galleries are one of the first things that made the Web surfing experience more interesting. These are whole pages of preview images, which, when clicked on, became the big ones allowed for fast scanning of the image material on offer and easy access to selected pictures. Chris Heilmann shows you how to create and maintain a thumbnail gallery.

Author Info:

By: Chris Heilmann

Poor Best

Rating:

/ 22

January 31, 2005

TABLE OF CONTENTS:

· Dynamic Galleries with DOM and CSS
· Basic Functionality of a Thumbnail Gallery
· Old School Dynamic Galleries
· Sketching our Gallery
· The Javascript
· The Stylesheet
· A Sequential Gallery
· Other options

When Javascript became more common, many developers with a lot of time and a lot of enthusiasm on their hands came up with hundreds of “DHTML galleries,” at times appallingly one-browser-centric and bloated ones. Nearly all of them used pop-up windows to display the images, and relied on a lot of inline event calls with a lot of parameters:

HTML:

<a href="javascript:showpic('images/archway.jpg',300,300) ">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" />
</a>

JavaScript:

function showpic(pic,x,y)
{
newwin=window.open(pic,'newwin','width='+x+',height='+y+'toolbar=no')
newwin.moveTo(screen.width/2-x/2,200);
}

This practice leads to completely dead galleries in browsers without JavaScript. A better way is to always ensure there is a link to the image and JavaScript that adds the pop-up functionality on top of that.

<a href="images/archway.jpg"
onclick="showpic('images/archway.jpg',300,300);return false;">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" />
</a>

These pop-up window examples still did not allow for a link back or extra information to be displayed. Seeing that as a problem, developers started writing out HTML dynamically:

HTML:

<a href="images/archway.jpg"
onclick="showpic('images/archway.jpg','An archway in Santorini',300,300);return false;">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" /></a>

Javascript:

function showpic(pic,message,x,y)
{
    newwin=window.open(pic,'newwin','width='+x+',height='+y+'toolbar=no')
    newwin.document.open();
    newwin.document.write('<html><head><title>Big picture</title></head>');
    newwin.document.write('<body bgcolor="#0000000">');
    newwin.document.write('<a style="float:right;font-family:arial;color:#369;"
    href="javascript:window.close()">Close</a>');
    newwin.document.write('<h1
    style="color:#fff;font-size:12px;font-family:arial;">'+message+'</h1>');
    newwin.document.write('<img src="'+pic+'" alt="'+message+'">');
    newwin.document.write('</body></html>');
    newwin.moveTo(screen.width/2-x/2,200);
}

There was no end to their creativity: sliding windows, fading in images, galleries with templates using the window location to read image location and message, and lots more. All of them had several drawbacks:

Bad maintainability - the idea of a dynamic gallery is that it enhances the basic HTML without any extra link event calls with a lot of parameters.
Bad Accessibility - they relied on Javascript for the functionality.
Bad performance – Instead of one browser, the machine needed to start a new window every time the user clicked a thumbnail.
Pop-ups - These might be blocked by a lot of users nowadays.

Let’s try to keep things as simple as possible, and not listen to the "feature creature" on our shoulders telling us to add more, more and some more later.

Next: Sketching our Gallery >>