5ThirtyOne



Javascript-free image gallery

Aug 6th 2006
19 Comments
respond
trackback

5thirtyone image gallery portfolio

After having grown tiresome of the flash solution which I had made use of for quick gallery previews in the portfolio, I decided to return to the basics with a CSS based image gallery. Plain-vanilla CSS using relative & absolute positioning to achieve a clean scriptless gallery.

For the following tutorial, we’ll construct a simple two image model using two thumbnail images, and their respective full image previews:

<div id="image_gallery">
<ul id="gallery_thumbs">
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg1.gif" alt="prvw" /></span></a></li>
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg2.gif" alt="prvw" /></span></a></li>
</ul>
</div>

Using the above structure, we now have a gallery container designated by #image_gallery, and a basic unordered list with the thumbnails and associated full previews wrapped with <span> tags to hide using CSS.

#image_gallery {
position: relative;
overflow: hidden;
}
ul#gallery_thumbs {
list-style: none;
margin: 0;
padding: 0;
}
#gallery_thumbs li {
background: none;
display: inline;
}
.thumb img { /* styles thumbnail previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover img {
background-color: transparent;
}
.thumb span { /* hides large previews */
visibility: hidden;
position: absolute;
}
.thumb span img { /* styles large previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover span { /* displays preview while hovering over thumb */
visibility: visible;
top: 80px; /* absolute positioning to control where previews are displayed */
left: 0;
z-index: 100;
}

Now that we have the basic HTML & CSS, we can now experiment with styling a gallery to match.



19 Comments

  1. Am I the only person that isn’t working for? The folio section is displaying both the thumbnail and the picture, and I’m using Firefox in OSX …

  2. Super stuff. Need to test this asap.

  3. Am I the only person that isn’t working for? The folio section is displaying both the thumbnail and the picture, and I’m using Firefox in OSX …

    That’s strange. Looks to be OK on my end with Firefix 1.5, Safari 2, Opera 9 (somewhat buggy displaying other images with the smallest mouse gesture), and IE 7 (IE 6 will be updated via software updates - does not understand the thumb:hover). I just hope I write the tutorial to match the actual gallery ;) Comment back and let me know what version you’re using.

  4. IE6 users could add a separate class, such as “.spanHover”. Then add the following to each span:

    onMouseOver=”javascript:this.className=’spanHover’;”

    Kinda defeats the purpose of doing without javascript, I know. But, it’s an easy fix for IE6 users.

  5. Simple fix. We all know that the time is near that Windows users the world over will begin using IE 7 thanks to the high priority update that will go out through Windows Software Updater. Oh what a happy week that will be as sites show their IE 7 faults.

  6. IE6 will be around for a while in the corporate space (sadly) however most users of XP will have IE7 thrust upon them as an update (as Derek mentions).

    IE7 has been around for quite some time now in the various builds that have either leaked or been made public, however I’m sure a large number of folks are going to get caught out with non IE7 friendly sites. :)

    A more important note, I believe you’ve found a simple yet elegant way of using CSS to make a basic gallery. The greatest thing? No javascript, so it will work in virtually anything. :)

  7. Wow, sweet stuff, this is going to be useful for my portfolio (when I get one…).

  8. I haven’t visited your site in a while but just noticed this article. I actually made something quite similar on my myspace account a few months back. Its on my blog page which I covered up and placed a photo gallery on. You can find it here.

    I actually was inspired to create it after I downloaded your lime green overlay a while back. Thanks for planting seeds of inspiration :)

  9. So…I guess what I’m getting at is what do you think about it?

  10. Looks good. Reminds me of my two year tenure at Washington State. Good times for sure.

  11. hi there

    love your template, will modify and update soon

    just a bug

    .thumb:hover span { /* displays preview while hovering over thumb */
    visibility: visible;
    top: 80xp; /* absolute positioning to control where previews are displayed */
    left: 0;
    z-index: 100;
    }

    top: 80xp; should be
    top: 80px;

    :) was goin mad.

    and is this script dependant on the size of the images? somehow we could’nt get it working

  12. Fixed that little typo. And for the record, there are not scripts involved. As far as I know, size does not effect whether or not the larger preview is shown. I managed to display 450px wide large images when the thumb was hovered over.

  13. geez that was fast :) appreciated

    however there’s something working improper with what i have been trying..
    http://www.braininpain.com/blog/html/gallery.html

    i ain’t a coder yb the way, just designer developing my coding skills…

    is there an actual working example on this menu? any url?

    thanks in advance.

  14. It looks to be working ok with the first image having a larger preview on rollover. You mis-linked your second rollover image.

  15. hmm
    why it happens to be not working here i wonder.

    firefox 2.0.0.2 with a ppc emac(runnin 10.4.8)
    and just asked for a pc user to check too..says don’t work

    any suggestions?

    (sorry to interrupt and thanks alot for your help and effort)

    ¿ : /

  16. Jim

    Am I going blind? I can’t see the live example anywhere…

  17. aaa

    could this be used on myspace

  18. There is no Javascript so I don’t see why something like this couldn’t be used on MySpace.

  19. I think this is cool but I sure hope there’s a demo page where we can view how it works. :)

Incoming Links



Leave a Reply

Comments may be held for moderation. If your comment does not appear immediately, do not repost. I reserve the right to remove any inappropriate or off-topic comments. Please use the forum if your comment is not appropriate for the current article.

Flickr Visit »

  • Cirqe lunch transport
  • Vacuum packaged
  • Pre-inflation
  • Covered
  • Compressed filling
  • Filler beat down
  • Airing out
  • Arrived via Fedex
  • SumoSac corner
  • Oddly simple to understand
  • MBA + Dell
  • Boo's new bed
  • Seen in Ballard
  • Warehouse
  • Shadowed
  • Detach washer from bumper
  • Wiring test
  • Grill delete
  • Almost
  • Dremel time