Javascript-free image gallery
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.
Explore » Discover new content on 5thirtyone.com
This post tagged gallery, javascript. Explore similarly tagged content below or visit a random entry. Visit the archives for additional content.
Andy
goodonpaper.org
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 …
Aug 6th, 2006 Quote
drekwon
smutmuffin.com/dakwon
Super stuff. Need to test this asap.
Aug 6th, 2006 Quote
Derek
5thirtyone.com
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.
Aug 6th, 2006 Quote
Zach
zacharydavidbiles.com
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.
Aug 6th, 2006 Quote
Derek
5thirtyone.com
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.
Aug 6th, 2006 Quote
Brendan
smackfoo.com
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.
Aug 6th, 2006 Quote
Billytheradponi (Nick Barrett)
pointlessramblings.com
Wow, sweet stuff, this is going to be useful for my portfolio (when I get one…).
Aug 7th, 2006 Quote
Brandon
myspace.com/brandonthaman
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
Aug 16th, 2006 Quote
Brandon
myspace.com/brandonthaman
So…I guess what I’m getting at is what do you think about it?
Aug 21st, 2006 Quote
Derek
5thirtyone.com
Looks good. Reminds me of my two year tenure at Washington State. Good times for sure.
Aug 21st, 2006 Quote
tolga
braininpain.com/blog
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;
and is this script dependant on the size of the images? somehow we could’nt get it working
Mar 19th, 2007 Quote
Derek
5thirtyone.com
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.
Mar 19th, 2007 Quote
tolga
braininpain.com/blog
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.
Mar 19th, 2007 Quote
Derek
5thirtyone.com
It looks to be working ok with the first image having a larger preview on rollover. You mis-linked your second rollover image.
Mar 19th, 2007 Quote
tolga
braininpain.com/blog
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)
¿ : /
Mar 19th, 2007 Quote
Jim
Am I going blind? I can’t see the live example anywhere…
Mar 21st, 2007 Quote
aaa
could this be used on myspace
Mar 23rd, 2007 Quote
Derek
5thirtyone.com
There is no Javascript so I don’t see why something like this couldn’t be used on MySpace.
Mar 23rd, 2007 Quote
stylemo
stylemo.com
I think this is cool but I sure hope there’s a demo page where we can view how it works.
Mar 26th, 2007 Quote