During Apple’s keynote yesterday in which they announced a new iMac, iLife 08, iWork 08, Airport Extreme and a new Mac mini, they also announced an update for .Mac.
The .Mac update included personal domains, increased storage and transfer limit and a Web Gallary.
The web gallery which can be published with one button from iPhoto gives a rich Web 2.0 experience and even works on IE on a PC. Developed using the Prototype and Scriptaculous JavaScript libraries, it introduces some really innovative ideas for displaying a large number of albums and photos.
The main page is a collection of album thumbnails that change as the user hovers over them. The powerful effect allows the user to quickly scan through the album’s photos without the need for a single click.
Once within an album, the photos are displayed in either a grid, mosaic, carousel or a slideshow. The user can quickly change the background colour, resize the photo thumbnails and subscribe to the galleries RSS feed. The carousel view is the same as the cover-flow album art display that iTunes and the new iPhone uses. Once the photo’s are fully loaded, its performance is really slick.
Congrats must go to the Apple developers that worked on the site. As a JavaScript developer, I’m really inspired by the quality of the work. My only criticism is that the main gallery JavaScript file weights in at an whopping 404 kb. A minor issue thou if you consider the prevalence of broadband connections.
Link to a sample Web Gallery
Update:
Steve Brewer has posted a great analysis of the JavaScript Code. He details how Apple left 128 lines of comments and how the images are used inefficiently. By combining the images into batches of 20 each being 160px by 3200px and then by using them as a positioned backgrounds, Steve’s test results show speed improvements of over 400%. Pretty Impressive!
Update:
Adam Houghton has done the seeminly impossible by creating a JavaScript version of coverflow. He has done great job using GWT.
Link to demo
Link to Adam’s blog announcing GWT Flow
August 8, 2007 at 8:59 pm |
[...] Trennery blogged about the features: The main page is a collection of album thumbnails that change as the user hovers over them. The [...]
August 8, 2007 at 9:38 pm |
[...] Trennery blogged about the features: The main page is a collection of album thumbnails that change as the user hovers over them. The [...]
August 8, 2007 at 9:47 pm |
The carousel is in flash/flex.
August 9, 2007 at 10:08 am |
Very slick user interface indeed!
…lots of deprecated browser sniffing and redirections in the javascript though!
Seems Apple choose to forget about web-standards with this, and use it to convince people to switch to Safari/OSX or at least Firefox instead!
October 27, 2007 at 8:52 pm |
The carousel is amazing Javascript work! BrokeOne, how can you say that it’s in flex? I snooped around with Firebug and saw Javascript.
The performance of the page wasn’t that great on a slower connection, it can definitely do with some performance work, but otherwise a very slick job.
October 30, 2007 at 11:50 am |
hi
exellent
November 3, 2007 at 5:27 pm |
dude.. every decent human been MUST have Safari or Firefox, really, IE suck.. and by the way, the js coverflow rocks
November 7, 2008 at 1:18 pm |
GWT flow seems buggy and it does not respond to mouse scroll and keyboard arrow keys.
Great job nonetheless.
March 29, 2009 at 8:33 am |
Nice, love the gallery. Now how do I copy it….
April 15, 2009 at 11:52 pm |
[...] was just thinking, while reading some posts on how to improve Apple’s new image skimming technology, how to make websites load faster. I [...]