brandnewbox.co.uk

UPDATE: an alternative version of this method has been added at the bottom of this article that takes a semantically marked up gallery and converts it to use the following technique using javascript.

An image gallery is a common web page requirement - a list of thumbnail images that link to larger versions of the images. In my example, the thumbnails have a maximum size, but can be of any dimensions within that size. Here is a technique to neatly display these images using CSS.

The finished image gallery can be viewed here

Generate list of images

As an image gallery is in essence a list of images, the logical HTML markup to use is an unordered list. Within each list item, the thumbnail image is displayed with a label, and it links to the full-sized image.

For starters, let’s use:

<ul>
  <li>
  <a href="big-image">
    <img src="thumbnail-image" alt="Label" />
  </a></li>
  ...
</ul>

Arranging images in rows and columns

To line the thumbnails in rows across the page we use the CSS:

li { display: inline; float: left; }

Traditionally we would have used tables, but by using CSS the number of columns can vary according to the width available.

As the thumbnails can all be differect dimensions, we can add a width and a height to get a more uniform grid

li { 
  display: inline; 
  float: left;  
  width: 101px; 
  height: 101px; 
}

Adding a background slide image

To make it a bit prettier let’s add a background image to the <li>:

li { 
  display: inline; 
  float: left; 
  width: 101px; 
  height: 101px; 
  margin: 4px;  
  background: transparent url(frame.gif) no-repeat top left; 
}

Centering the thumbnail

To centre the thumbnail within its container we’ll change the markup to make the thumbnail image a background image to tha <a> link. This allows us to use CSS to centre it easily and works well across browsers.

HTML:

<li>
  <a href="" 
    style="background-image: url(thumbnail-image)" /></a>
</li>

CSS:

li a { 
  display: block; 
  width: 101px;
  height: 101px;
  background-position: center; 
  background-repeat: no-repeat;
  text-decoration: none;
}

Displaying labels

Moving the thumbnail image into a background image loses the image’s label from the HTML. To put it back in, we include it within a <span> in the <a> tag.

HTML:

<li><a href="" 
  style="background-image: url(thumbnail-image)" />
  <span>Label</span>
  </a></li>

CSS:

li { height: 115px; }
li a span { 
  font-size: 9px; 
  position: relative; 
  top: 103px; 
  color: #666;  
  text-transform: uppercase; 
  display: block; 
  text-align: center; 
} 
li a:hover span { color: red; }

A working example of an image gallery can be found here

As one of the commenter below suggests, ideally the gallery should be marked up semantically - images should be tagged as <img>‘s. An alternative method that uses javascript to ‘juggle’ a more semantically sound version of the gallery into the format above has been produced: an unobtrusive Javascript and CSS based image gallery

Comments

Commenting is not available in this weblog entry.