Wednesday, August 8th, 2007

.Mac Web Gallery on Prototype

Category: Prototype, Scriptaculous, Showcase

As part of the Apple announcements yesterday they showed off a new .Mac Web Gallery that uses Prototype and Script.aculo.us to give you a rich web view of your photos.

Shaun Trennery blogged about the features:

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.

Very slick indeed.

.Mac Web Gallery

Posted by Dion Almaer at 1:59 pm
29 Comments

++---
2.4 rating from 216 votes

29 Comments »

Comments feed TrackBack URI

Yuck, you mouseover and it sends a request to get the sub pics…or am I wrong?

Comment by emehrkayeme — August 8, 2007

It works in safari & ie(?), but not firefox. You need to move the cursor left to right.

Cool effect, Im going to write a mootools version

Comment by emehrkayeme — August 8, 2007

Wow….

Comment by Paul — August 8, 2007

Look at the site with an iPhone. Its really amazing!

Comment by chuck — August 8, 2007

Uh, the cover flow is in Flash.. not that impressive after all.

Comment by Rahul — August 8, 2007

pretty slow .. and why don´t they wrap the quicktimes inside a flash player?

Comment by MP:Schorsch — August 8, 2007

After playing with it for a while, I like it. I really love the approach with updating the hash and allowing the user to send the link, they’re using some sort of history manager right? And I also like the fake flip of the pictures, great implementation. I told one of my partners that “flipping” an element in html was pretty much impossible, but they pull it off.

@Rahual – I cracked open firebug to check the element’s style and for about a min thought that I was doing something wrong. I bet it could be done in html though…

Comment by emehrkay — August 8, 2007

Not impressive by any standards. Load up firebug and see that the front page is roughly about a 2mb transfer (from gallery.apple.com, 2 connections at a time for 160 request).

animations and such are rather slow, reflections are pre-rendered, and as someone mentioned the carousel is in flash, when it could’ve been easily done w/ ajax.

Comment by waynep — August 8, 2007

emehrkay,

We talked about using the hash a long time ago on Ajaxian: http://ajaxian.com/archives/ajax-tackle-the-refresh-button

For the gallery, they are updating the hash with SproutCore: http://wiki.sproutit.com/core/show/Routes

Comment by Eric Pascarelo — August 8, 2007

I am seeing that it does not work in Safari 2, at least not the “scanning” part. It does, however, work in Safari 3. Kind of stupid that they don’t fully support their own official browser. Seems to work fine in Firefox 2 on OS X for me.

Comment by mark — August 8, 2007

I guess the cool thing about this is that Apple is using Prototype and Scriptaculous to do this, more power to them.

Comment by Nick — August 8, 2007

why they don`t use packer or something like that?

Comment by Uriel Katz — August 8, 2007

none of you could have done that. shut it, it’s friggn awesome.

Comment by randy — August 8, 2007

Not that I think most people need to test on strange browsers, but it’s probably worth it to point out going to that gallery on the Wii Browser crashes the Wii completely, to the point where you need to unplug it to get it working again.

Comment by mark — August 8, 2007

Yet again apple adds something new to a product that just feels like it should be obvious and yet no one else has done it. I think the left-to-right rollover of a gallery thumbnail showing thumbnails of the pictures within is brilliant and I expect that soon it will be integrated into many other galleries out there–or at least be a demanded feature.

Comment by Peter Goodman — August 8, 2007

I really wish the cover flow was in js. I would really like to use this one one of my projects. Guess I need to brush up on my Flex.

Comment by Paul — August 8, 2007

I love it, but is too slow even with DSL

Comment by Ignacio Giri — August 9, 2007

I guess grandma on her 56k won’t be able to see the pictures after all.

Comment by wesley — August 9, 2007

It’s a heavy load, but besides that this is one of the greatest galleries I’ve ever seen.
If you can write me that carousel in JS, be my guest.

Comment by iBram — August 9, 2007

It is a heavy load, but it is damn impressive for a free web app.

With these web apps getting better and slicker all the time, Microsoft software should be obsolete fairly soon :)

Seriously the Google, Mac and Yahoo web apps are, even now, almost as solid and reliable as microsoft office equivilants, and much nicer to use

Comment by Justin L — August 9, 2007

That is very impressive. Regardless of all the things you guys are pointing out it is a great idea. I am sure things will be continued to be cleaned up and optimized as the gallery evolves.

Comment by justin — August 9, 2007

Hmmm…. on a mac..using camino and says they dont support it.

ajaxian? camino is the same rendering engine and javascript as firefox!

Comment by mac hating mac user — August 9, 2007

@mac hating mac user: But it says Camino and not Firefox in the browser’s user agent … And by the way, it works anyway, just go ahead!

Comment by Peter Pan — August 9, 2007

There is a lot they could do to reduce the page weight and load time. They aren’t even minifying the javascript. I was surprised they hadn’t even stripped whitespace out of the javascript…

Comment by Steve Brewer — August 9, 2007

its really crashy on firefox here.
and slow :/

Comment by markus — August 10, 2007

iBloat:1384requests,2.66MB
wow!,amazing!

Comment by el_vartauy — August 10, 2007

The page loading doesn’t have to be nearly so bad. They could do a lot of simple things (like not having 128 line comments in their javascript) to make things better. They could also use a film-strip image technique to really cut down on the number of requests they are sending on load. more here: http://www.bigdumbdev.com/2007/08/build-better-gallery-skimmer-part-1.html

Comment by Steve Brewer — August 11, 2007

What a bunch of lame asses. You all sit around tearing into other people’s work that you wouldn’t have a prayer of replicating. Not to mention the fact that nothing close to this has been done before, especially by any of you. I’m no Mac fanboy but give them their props for an app that is amazing and can only improve.

-nuff said

Comment by Hater — August 16, 2007

its looks good …
but kinda slow for me …
may be coz i’m on a slow connection …
hehe …

Comment by subcorpus — August 28, 2007

Leave a comment

You must be logged in to post a comment.