sending...
CSS3 "SnowStack" Demo – 3D Photo Gallery Using Flickr API
Charles Ying over at satine.org developed this amazing little web app using draft CSS3 code. Its modern, simplistic design mimics that of a flash-based gallery. The app is very simple at its core, allowing a programmer to easily define which photos to load using XML. The impending death of Flash seems to keep closing in — you will be astonished that this gallery only uses CSS and some Javascript.
Click here to see my implementation of SnowStack. I’ve modified his source code and used it to pull from our Flickr photostream. Mac OS X 10.5 or 10.6 and Safari 4 are required for the effects to work properly — iPhones and iPod Touches with OS 3.0 and newer also work!. Sorry Windows users and late OS X adopters!
Check out Charles’ blog post for more info!
Nice stuff – seems to work reasonably well in latest developer branch Chrome on Ubuntu (WebKit brethren). The z-sorting on zoom is a little broken (not sure if this is an issue on Mac/Safari) where the zoomed image is overlapped by it’s right and bottom neighbours.
Working (very impressively!) for me with Safari 4 and OS X 10.5.
Working with Safari 5/winXP.
Wonderful, it’s working on my end on Safari 5 on OS X 10.6 as well.
Hi Ben,
Nice implementation. I am looking to extend this too, with the eventual aim of adapting it to work with the iPad. At the moment though I am looking on adding a feature.
I have successfully adapted it to load images locally, with thumbnails that change to different images on spacebar. The problem I am having is for the original thumbnail image to return when you zoom out.
I’ve been pulling my hair out trying to work out how to do it, do you have any ideas how this might be achieved? I would be happy to share the final version if I can get this working, that should also respond to touch events.
Cheers,
Simon
Hi Simon. What is happening exactly when you zoom out? I will test on the iPad simulator and see if I can help…