My very own infinite carousel (aka – “picture-spinny-thing”)

After a conversation with a friend, I set about making a non-flash carousel because, you know, I'm cool and that..... Then after making it I needed to store it somewhere, so here it is! All-told about 2 hours work, with pictures stolen from my church's website, mainly because the graphics team there are simply amazing.

You might ask why not use flash, after all I'm not against flash. But in this case there are two main reasons why you might try a non-flash solution:
- So it can work on the iPhone/iPad
- Because screen readers (for the partially sighted/blind) can't read flash sections of a webpage but, conversely, any html present can clue the reader into what's going on semantically within a page.

Click the picture below to get to the demo:

Geek notes: the glow effect is CSS3 box-shadow (learn more here), IE6-8 support is added with CSS3Pie



I'll admit that I'm slightly obsessed with zoomooz.js, it's a cross-browser (excluding IE) nice zoom plugin for jQuery. And although it has some issues with scrolling it's a top-notch plugin in my books. To showcase it's greatness I made a mock-up of a picture gallery*:

*if any of the pictures are yours let me know and I'll acknowledge you here.

The polaroid effect is CSS based, with a bit of javascript to fit the pictures. The random distribution uses CSS3 transforms (random rotation with a slight translation). ZooMooz.js then does the rest!

Geek Bootnote: The page uses @font-face and html5 data attributes to keep track of the ordering, the juicy javascript can be found here (script.js)

Update: A good intro on Zoomooz.js can be found here.