How to use CSS to Create a 'Two Step' Photographic Gallery

Introduction

Following from the success of my previous article 'How to Create a Photographic Gallery Using CSS' I've now taken things a little further and produced a totally new method which doesn't require thumbnail images and has a unique two step method of display. The 'mouse hover' stage creates a half size image and the 'mouse click' creates a full size image.

As with the previous article you'll learn how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS). You'll go through the styling one step at a time and end up converting:

An unordered list of photographs
into a....
A photo gallery with a difference

Each step is thoroughly explained and has an example page showing the effect of the additional styling. This is so you know what to expect.

This photograph gallery will also work in all the latest browsers and I have included hacks enabling Internet Explorer 5.5 to interpret the style correctly. The styling is not too long or difficult, but the layout needs a lot of attention to detail and preplanning.

Method

Step 1

The images

For this gallery I have used 24 images each 320px x 240px all on the theme of graffiti. I have chosen this size for several reasons:

The file size for each image needs to be fairly small as all the images are required to be loaded before the gallery will work.
As the 'thumbnails' surround the display area, on a 7 x 7 grid it is an easy calculation to find the thumbnail size is 64px x 48px.
There will be five 'thumbnails' across the 320px horizontal display area (320px/5=64px)
There will be five 'thumbnails' down the 240px vertical display area (240px/5=48px)
There will be one 'thumbnail' in each corner making a total of 24 'thumbnails' (5+5+5+5+4=24)

It's always possible to adapt this layout to fit any quantity of images at any size but always consider the time required to download the images.

The basic (x)html list is given below.

<ul id="gallery">
  <li><img src="../images/g1.jpg" alt="#1" title="#1" /></li>
  <li><img src="../images/g2.jpg" alt="#2" title="#2" /></li>
  <li><img src="../images/g3.jpg" alt="#3" title="#3" /></li>
  <li><img src="../images/g4.jpg" alt="#4" title="#4" /></li>
  <li><img src="../images/g5.jpg" alt="#5" title="#5" /></li>
  <li><img src="../images/g6.jpg" alt="#6" title="#6" /></li>
  <li><img src="../images/g7.jpg" alt="#7" title="#7" /></li>
  <li><img src="../images/g8.jpg" alt="#8" title="#8" /></li>
  <li><img src="../images/g9.jpg" alt="#9" title="#9" /></li>
  <li><img src="../images/g10.jpg" alt="#10" title="#10" /></li>
  <li><img src="../images/g11.jpg" alt="#11" title="#11" /></li>
  <li><img src="../images/g12.jpg" alt="#12" title="#12" /></li>
  <li><img src="../images/g13.jpg" alt="#13" title="#13" /></li>
  <li><img src="../images/g14.jpg" alt="#14" title="#14" /></li>
  <li><img src="../images/g15.jpg" alt="#15" title="#15" /></li>
  <li><img src="../images/g16.jpg" alt="#16" title="#16" /></li>
  <li><img src="../images/g17.jpg" alt="#17" title="#17" /></li>
  <li><img src="../images/g18.jpg" alt="#18" title="#18" /></li>
  <li><img src="../images/g19.jpg" alt="#19" title="#19" /></li>
  <li><img src="../images/g20.jpg" alt="#20" title="#20" /></li>
  <li><img src="../images/g21.jpg" alt="#21" title="#21" /></li>
  <li><img src="../images/g22.jpg" alt="#22" title="#22" /></li>
  <li><img src="../images/g23.jpg" alt="#23" title="#23" /></li>
  <li><img src="../images/g24.jpg" alt="#24" title="#24" /></li>
</ul>

Step 2

The !DOCTYPE

Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which leads to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.

Step 3

Adding links and style information

To use the :hover pseudo class style I need to change the basic unordered list into an unordered list of links. This is because Internet Explorer will only allow :hover to be used on links. I also need to add extra markup to target specific images.

The (x)html will now look like this.

<ul id="gallery">
  <li><a href="#nogo"><img src="../images/g1.jpg" alt="#1" title="#1" /></a></li>
  <li><a href="#nogo"><img src="../images/g2.jpg" alt="#2" title="#2" /></a></li>
  <li><a href="#nogo"><img src="../images/g3.jpg" alt="#3" title="#3" /></a></li>
  <li><a href="#nogo"><img src="../images/g4.jpg" alt="#4" title="#4" /></a></li>
  <li><a href="#nogo"><img src="../images/g5.jpg" alt="#5" title="#5" /></a></li>
  <li><a href="#nogo"><img src="../images/g6.jpg" alt="#6" title="#6" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g7.jpg" alt="#7" title="#7" /></a></li>
  <li class="lft"><a href="#nogo"><img src="../images/g8.jpg" alt="#8" title="#8" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g9.jpg" alt="#9" title="#9" /></a></li>
  <li class="lft"><a href="#nogo"><img src="../images/g10.jpg" alt="#10" title="#10" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g11.jpg" alt="#11" title="#11" /></a></li>
  <li class="lft"><a href="#nogo"><img src="../images/g12.jpg" alt="#12" title="#12" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g13.jpg" alt="#13" title="#13" /></a></li>
  <li class="lft"><a href="#nogo"><img src="../images/g14.jpg" alt="#14" title="#14" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g15.jpg" alt="#15" title="#15" /></a></li>
  <li class="lft"><a href="#nogo"><img src="../images/g16.jpg" alt="#16" title="#16" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g17.jpg" alt="#17" title="#17" /></a></li>
  <li class="pad"></li>
  <li class="lft"><a href="#nogo"><img src="../images/g18.jpg" alt="#18" title="#18" /></a></li>
  <li><a href="#nogo"><img src="../images/g19.jpg" alt="#19" title="#19" /></a></li>
  <li><a href="#nogo"><img src="../images/g20.jpg" alt="#20" title="#20" /></a></li>
  <li><a href="#nogo"><img src="../images/g21.jpg" alt="#21" title="#21" /></a></li>
  <li><a href="#nogo"><img src="../images/g22.jpg" alt="#22" title="#22" /></a></li>
  <li><a href="#nogo"><img src="../images/g23.jpg" alt="#23" title="#23" /></a></li>
  <li class="rgt"><a href="#nogo"><img src="../images/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>

Make sure that each list item is on a single line as splitting them over several lines can cause unwanted spaces in Internet Explorer.

Style Ready List

Every list item is now enclosed in a link. Some have no class others have either 'lft' or 'rgt' which is short for 'left' and 'right.' I've also added an empty list item with a class="pad" to correct a bug in Internet Explorer, but more about that later.

I've used href="#nogo" instead of the more usual href="#" so that anyone clicking the link will not jump to the top of the page (just make sure you do not have an anchor #nogo on your page).

The (x)html unordered list is now complete and I won't need to make any more changes to it.

Created: March 27, 2003
Revised: Sept 12, 2005

URL: https://webreference.com/programming/css_gallery2/1

How to use CSS to Create a 'Two Step' Photographic Gallery