Wednesday, July 04, 2007

2:58 AM// iTunes-like interface in JavaScript?

It's true. I set out to mimic the iTunes Album Art interface using only JavaScript and came up with this.

Do wha?

Why would anyone do such a thing, you ask? In the ongoing effort to improve my own photography website and cool-point multiplier, I was brainstorming ways to display a series of photographs as art. Then I thought, "hey, that iTunes thing is pretty good -- why don't I just steal that?"

How?

Each piece of art has three states: left, forward, and right. The left and right bits slide back and forth -- easy. The clicked-upon artwork fades from its side slot in sync with the currently displayed piece. The img src of the forward piece is changed, then faded back in. Huzzah! Instant album art.

I'd like to thank Scriptaculous for providing such wonderful JavaScript functions for the sliding and fading. Prototype helped too.

Making the images, on the other hand, was also a challenge. Turns out Photoshop has a JavaScript-based scripting language! Who knew? You can't do everything, like make or use masks, which would be fantastic, but you can automate quite a bit. Also, the more limited macros helped.

Well, I'd say definitely worth staying up all night for. Happy Independence Day, to all you fellow USers.