When I first saw 280 North’s “280 Slides” application, I have to admit I was very impressed. They built a truly native-feeling (well, if you’re on a Mac) tool on the standard web platform. Not an easy feat, and clearly some big brains operating on the problem.
But the more I read about their toolkit (Objective-J), the more unsettled I felt. It’s the same feeling I get when I see tools like Flex. These are some seriously complicated development environments, meant to abstract away to the fundamental building blocks of the web.
So I tackled re-implementing their FlickDemo application (several hundred lines of Objective-J) using jQuery and jQuery UI. It took about 3 hours to build, and ended up being about 45 lines of code (plus the frameworks, of course), and just under 200 lines of CSS declarations.
What I didn’t do: I didn’t bother hacking the CSS to work in Internet Explorer. It’s not that it couldn’t be done — jQuery supports it just fine — I’m just lazy. So you’ll need a modern WebKit or Gecko browser to see the demo. I also didn’t implement the drop shadows that Cappuccino uses on their images.
Also, the jQuery version doesn’t take over all you keyboard shortcuts, so you can still navigate around in your browser.
Original Cappuccino version
My jQuery version
Download the source here: flickrDemo-jQuery.zip
Update: Due to popular demand, I’ve changed the behavior of the slider so the image size updates in realtime. Total change: one word.
Update 2: Alexander Simmerl was nice enough to provide an upgrade to the image loading, bulking up the code by a few lines but greatly improving the load animation. In the comments, dak contributed a 2-line CSS fix for the inline-block layout problems in FF2 and IE7, which I’ve also merged.