The Image Gallery

I’ve been looking for a simple image gallery, you know the type: a bunch of thumbnails on a page, with one larger image, and as you roll over a thumbnail it displays where the larger image is…

I’ve found a ton of these, but the problem is, I have not found one I really like. For the project I’m working on now, I need something that does not require PHP or any other back-end code, it has to be straight HTML, CSS, Javascript.

I’d like to find one with valid XHTML and CSS, that doesn’t require a tremendous amount of Javascript attached to the HTML elements. Lightbox JS is nice in the way it just uses a rel attribute to do it’s thing, but it and it’s spin-offs and clones don’t seem to be exactly what I am looking for.

I think it would be very cool to have something that works even without Javascript, and maybe used unique URIs for each image/page. I can see this working in two ways. (The following is just some brainstorming, I haven’t thought through it all yet…)

The first would use a single page, and each image would be a link with an anchor, so each image displayed would get a unique URI, like so: gallery.html#img1, gallery.html#img2, etc. This would allow a user to go to the page, click the thumbnail image they want to see the larger version of, and the copy/bookmark the URL, and pass it on, or return to the page, and see the image they choose as the larger focused image. This doesn’t sound too hard, but I have not found it yet.

The second is less coder-friendly, but perhaps more user-friendly. If the gallery has 12 images, you would create 12 pages, each almost identical, except for the larger focus image on each. If Javascript was enabled, you could then see all images on the single page by doing the classic Javascript swap, and if Javascript was disabled, the onclick would be ignored, and the href would take you to the approprate page, like so: gallery01.html, gallery02.html, etc.

I’ll see how ambitions I get with this project. I know, I might be the last person to actually care enough to say “I’d like an image gallery that takes advantage of Javascript, but is still fully functional without it, and provides unique URIs for every image.” Wish me luck!