There are many options available for image galleries, using scripting or script libraries, flash and databased content or a combination of the aforementioned. This one was an experiment for my main website and a working example can be found here.

Why CSS only? Well it started as an experiment (as stated), but not using Javascript for instance will mean that the gallery will display as designed even when the user has turned off Javascript in their browser – a practice that I am not convinced is all that popular anymore, but I am told some people still do so. Needless to say, one can disable CSS in your browser as well, but this method will work itself around that problem.

The thinking behind the method:

• First we need to consider what we would like our gallery to look like. There are various methods for displaying images in a gallery, most using the hover attribute. I wanted a gallery that looked similar to the Javascript “dopic” method (for want of a better term) where one clicks on a thumbnail and the image in question displays at full size in a separate box
• Secondly I wanted a caption/description of the image below it and, in the case of the website showcase, a link to the website on display
• And last but not least, I wanted something that degraded gracefully, should CSS be disabled in the visitor’s browser

What I came up with:

• A container (<div>) that houses all of the actual gallery
• Another container that houses the thumbnails
• Yet another container with the actual image and caption

Right, but how to link the lot – the method is so simple you’d laugh … I used named anchors. In other words: the thumbnails are links to named anchors in the preview window. The preview window itself has a fixed size with the overflow hidden, meaning that the anchor aligns itself with the top of its containing element – we just need to ensure that the image and its caption is somewhat larger (vertically) than its parent to prevent the top of the next anchor from showing itself within the preview window. I’d also recommend the use of a decent CSS reset to make sure our friend IE6 does not get out of hand here and create headaches. I used Eric Meyer’s method that you can find at meyerweb.com … thanks Eric

The HTML:

<div id="gallery">
  <div id="previews">
    <a href="#prev01"><img src="thumb01.jpg" alt="" class="thumb" /></a>
    <a href="#prev02"><img src="thumb02.jpg" alt="" class="thumb" /></a>
    <a href="#prev03"><img src="thumb03.jpg" alt="" class="thumb" /></a>
  </div>
  <div id="cropper">
    <img src="pic01.jpg" id="prev01" class="showcase" alt="" />
    <p class="caption">Caption text here</p>
    <img src="pic02.jpg" id="prev02" class="showcase" alt="" />
    <p class="caption">Caption text here</p>
    <img src="pic03.jpg" id="prev03" class="showcase" alt="" />
    <p class="caption">Caption text here</p>
  </div>
  <-- Clearing div -->
  <div class="clr"></div>
</div>

Simple enough, isn’t it. Right on to the stylesheet then (you’ll have to toy with it until you find values that best suit your application). I haven’t included sizes for the elements, as you’ll be using your own values. The bottom padding of the caption should be enough to push the next named anchor down well beyond the visible portion of its parent. I have floated the thumbnails and “cropper” div left – this means that they’ll stay in the same order from the top down in the event of the CSS being disabled. Also remember to build in a clearing div before the closing tag of the “gallery” div if you use floats to ensure that the “gallery” parent encompasses all of its content.

The CSS:

#previews{
float:left;
}

#cropper{
float:left;
overflow:hidden;
margin:0;
padding:0;
}

.thumb{
float:left;
}

.caption{
float:left;
padding-bottom:50px;
}

.clr{
clear:both;
}

These are the bare bones values – you can have a look at the markup (should be easy to follow in the example on my site) and find the CSS here.

If you were paying attention, you’d figure out for yourself that you can use this for any type of content, not just images. Here is an example of the same method used to display tables with product data.

The method is not without its quirks though. The risk of margin and padding issues in IE is always there – even with the use of the CSS reset. The most annoying quirk though, is the fact that the method relies on the anchor aligning itself with the top of its parent element. This means that (if your content is enough to force the page to scroll) the whole page will jump up to place the anchor as high up as possible. The simplest way to avoid this, is to simply limit the height of the page by keeping the content concise. I suppose you could also stick everything in an iframe, but I personally wouldn’t be able to live with myself for doing so.

You are welcome to provide input, ask questions or contact me if you need help with this method. Thanks for reading