Hi guys, I'm a newbie at formal web design and I'm trying to find out what the best way would be to have a list of thumbnail images in one div each set as a link to load a larger version of the image clicked into another div, a sort of gallery-and-view-window setup.

I know this can be done with frames but I want to avoid frames due to their drawbacks (old school, not good for permalinking, etc.). If there were some way to do this without also using php or javascript that would be preferable as well - a simple HTML and CSS solution would be best.

Here's a sample of the page and what I'm trying to do:

Example Pic - Clicky clicky

4 answers

danwellman 5600
This was chosen as the best answer

This can be done purely with CSS. Take for example the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pure CSS Image Selector Example</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <div id="thumbs">
            <a href="#img1"><img src="img/thumbs/boomerang.jpg"></a>
            <a href="#img2"><img src="img/thumbs/crab.jpg"></a>
            <a href="#img3"><img src="img/thumbs/egg.jpg"></a>
        <div id="viewer">
            <div id="slide">
                <img id="img1" src="img/large/boomerang.jpg">
                <img id="img2" src="img/large/crab.jpg">
                <img id="img3" src="img/large/egg.jpg">

Simple layout - thumbnails on the left, viewer on the right. Note that the href attributes of the links wrapping the thumbnails point to the large versions of the images.

This CSS will lay this basic page out:

#thumbs { width:110px; float:left; margin-right:31px; }
#thumbs a { margin-bottom:31px; display:block; }
#thumbs a img { border:none; }
#viewer { width:400px; height:400px; float:left; overflow:hidden; position:relative; border:1px solid #000; }
#slide { position:absolute; top:0; height:400px; width:1200px; }
#slide img {float:left; display:inline; }

The important points to note are that the outer container (#viewer) is the width and height of a single image while the inner container (#slide) is the height of a single image but the width of all of the images combined. the outer container has overflow:hidden on it so that only one image is visible at a time. The main images are floated left so that they stack up next to each other.

When you click one of the thumbnails the corresponding large image is displayed. No JS and no frames are used, although you could add some sweet tranisitons with jQuery if you wanted :D

See the example I put up - it works in firefox, safari (and chrome) and IE8 flawlessly. Additonal CSS would be required to make it work in IE7 and IE6 but it is possible as I have seen the same technique working in these browsers also.

Answered over 9 years ago by danwellman
  • very nice... Dwayne Anderson over 9 years ago
  • Wow thank you! Just tried your example and it works great for what I'm trying to do. colejohnson over 9 years ago
  • cool, glad it helped :D danwellman over 9 years ago
  • Well done Dan, you've proven me wrong that it can't be done with JS! o.k.w over 9 years ago
  • lol :D danwellman over 9 years ago

I think you're going to use Javascript for this and jQuery makes it pretty easy, even you're not a programmer. Check out example #9 on this page: http://www.webdesignerwall.com/demo/jquery/

Answered over 9 years ago by Rob Babcock
o.k.w 2355

Well, CSS can handle some behaviorial stuff (e.g. on hover/mouseover/out), but it can't handle mouse clicks.

I agree with Rob, the best method is use javascript and jQuery is a good framework with lots of plugins to handle your requirements.

Other than his suggested plugin, here's another one you can look at:
Galleriffic Sample: Thumbnail rollover effects and slideshow crossfades

More resources:
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials
14 jQuery Plugins for Working with Images

Answered over 9 years ago by o.k.w

o.k.w. -- I didn't ask the question but I'm grateful for your answer -- nice links.

Answered over 9 years ago by Not-a-Coder
  • You are welcomed :) o.k.w over 9 years ago
  • First of all, this is not a answer... You should really put the praise in the comments of the (indeed very good) answer, and click the "Great answer" button to help o.k.w on the way to doctype rockstardom :) Thie Thomsen over 9 years ago