Thursday, March 30th, 2006
Pure-CSS Image Gallery
Category: CSS
, Programming
We’ve seen lots of Ajax image galleries and slideshows and, not surprisingly, they invariably make good use of Javascript. But Stu Nichols proves it doesn’t have to be that way - he’s built a functional image gallery in pure CSS (via Digg). His article points out it’s compatible with all the major browsers.
Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version.
I am currently working on the MK.II version which, I hope, will allow the full size image to open in the same display area rather than a new window.
The gallery is a good reminder of the role CSS can play in dynamic web apps.
[...] Hace unos dÃas os comentaba que estos efectos CSS eran increibles, ahora via Ajaxian veo este que se me pasó por alto comentar. Una galerÃa completamente hecha en CSS y XHMTL sin utilizar otras tecnologÃas, realmente increible, de esta forma te puedes asegurar que funciona para todos los navegadores, IE5.5, IE6, IE7 beta, Opera 8, Firefox 1.5 etc.. [...]
Huh. Very nice. But isn’t it very slow, because its loading ALL images at loading the page?
Interesting…but ajax related?
it is ajax related because it does not need ajax :P
That was quite impressive considering only CSS is used. I didn’t find it slow because it kept on loading images under the other tabs as I was moving my cursor over the selected image-set.
It’s beautifully done, but has one important limitation - the difference in size between the thumbnail and the zoomed picture is limited, since the zoomed picture covers other thumbnails.
To get a much larger photo, you would need to space the thumbnails very far apart, or have very large “thumbnails”.
it’s nice ~ some please may useful ^^
it’s nice ~some place may useful …..
Wow! That’s all I can say. I can’t belive it’s pure css.
Excellent use of CSS. Never thought CSS can be this effective.
yeah, it is a bit slow but considering it “css-only” its quite impressive.
[...] You may also consider looking at the entire Ajaxian CSS Category [...]
I agree, it can be somewhat obtrusive given the fact is loads all of the images. The more polite thing to do is to allow which images are downloaded to the end-user’s computer- by their selective preference. But, then again, it is pretty neat - especially if the images you have aren’t big or if they are/can be scaled down in size.
Good, but a little slow :-(
Very professional look!
We have a page where we provide our Artists with an AJAX Image Gallery example:
http://www.featurepics.com/Editorial/ajax-gallery.aspx
Could you please to leave comments pointing to this page as another way to design a gallery?
Hi, Im asking is it possible image content below the menu - Portraits, Landscapes…to be static, without hiding.