June 1, 2008

A CSS-only Image Gallery

Filed under: HTML/CSS,Reference/Learning — Tags: , , , , , — Jayx @ 9:30 pm

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 :)

Be Sociable, Share!

5 Comments »

  1. This is awesome. I love how simple it is. The bug though is if you have vertical images that are bigger than the browser window. Do you think there’s any way around this “jumping” effect?

    Comment by Justin Hartman — July 7, 2008 @ 9:16 pm

  2. Not a bug really … it is meant to happen because the browser will align the target with the top of the browser window – that’s what it’s meant to do. I can’t really think of another way to do this without using JavaScript. I am looking into implementing client side scripting for something that will degrade as nicely as the CSS only version – my focus/purpose was creating something that will still work in plain old HTML … in other words something that will work even when you disable CSS. Obviously you’d lose the effect, but not the content.

    Comment by admin — July 7, 2008 @ 9:35 pm

  3. Unfortunately it doesn’t seem to work at all in Opera, so seeing as Opera users are tech savy I think I will have to use javascript as a back up.

    Or do you think there is another way round it?

    Comment by Mike Board — March 10, 2009 @ 4:45 pm

  4. @mike did you view the main website in Opera to test? As I said … the example above is bare bones values, I might have slipped in some extra markup to flesh it out …

    … actually you have just brought something to my attention that I haven’t noticed before; sure I tested in Opera though – currently on Opera 9 and it is not working as you say.

    I’ll update as soon as I find a fix for this.

    The method I used does almost exactly what most sliders scripts do, which is to load all the content and confine the portion that you want visible to a “cropper” div.

    Not that I have anything against the use of JavaScript either – was just a concept that I’ve been toying with for some time now … would still love to find a solution to the screen jump issue with this method as well.

    Thank you for commenting though.

    Comment by admin — March 10, 2009 @ 5:11 pm

  5. ahhhhh, cheers. you don’t know how long it took me to find a html/css solution to the very over boding and “not as easy as they say jquery galleries”. i’m still playing round with your base code to get it to do what i want but i don’t foresee any troubles.

    i was a) wondering if you sorted that Opera problem. not that i use it but i like to cover as much as possible. b) are there any other examples of CSS-only image gallery being used anywhere?

    again,
    thanks for the foot work. it hard to find exactly what you want. hopfully i’ll be good enough to create and supply such simple to use solutions.

    pete.

    Comment by peter — July 18, 2012 @ 2:01 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress. WP Classic Theme adapted by jayx. Valid XHTML 1.0 Transitional.