.Mac Web Gallery: Great use of JavaScript

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

Advertisements

10 Responses to “.Mac Web Gallery: Great use of JavaScript”

  1. Ajaxian » .Mac Web Gallery on Prototype Says:

    […] Trennery blogged about the features: The main page is a collection of album thumbnails that change as the user hovers over them. The […]

  2. .Mac Web Gallery on Prototype « outaTiME Says:

    […] Trennery blogged about the features: The main page is a collection of album thumbnails that change as the user hovers over them. The […]

  3. BrokeOne Says:

    The carousel is in flash/flex.

  4. Luca Says:

    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!

  5. Jaffer Haider Says:

    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.

  6. blog Says:

    hi

    exellent

  7. Alv Says:

    dude.. every decent human been MUST have Safari or Firefox, really, IE suck.. and by the way, the js coverflow rocks

  8. randytamayo Says:

    GWT flow seems buggy and it does not respond to mouse scroll and keyboard arrow keys.
    Great job nonetheless.

  9. Joe Says:

    Nice, love the gallery. Now how do I copy it….

  10. Steve Tranby » Blog Archive » Websites as Zip files? Says:

    […] was just thinking, while reading some posts on how to improve Apple’s new image skimming technology, how to make websites load faster.  I […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: