iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect.
Similar to folders in iOS, this effect lets users to scan a list of items and open one up in place. This has advantages over more traditional pop-up windows and mode changes, which can obscure content and cause the user to lose their place in the list.
A second aspect of this feature is that it uses content to enhance the chrome. In the detailed view, the background and text colors are generated algorithmically from album art. This not only serves a practical purpose in making the detailed view stand out from the list, but creates a nice (in most cases) aesthetic effect and a sense of feeling that differentiates one album from the next. The intrepid Seth Thompson and Wade Cosgrove have already recreated this, using Mathematica and Cocoa respectively. Apple’s algorithm, it turns out, is pretty sophisticated.
Here’s my take, using HTML, CSS, and Javascript.
And you can check it out for yourself here:
Details
The demo is built with App Folders, with behavior and style modified to mimic iTunes. Color Thief is used to derive colors on-the-fly from album art using a median cut algorithm. On top of this, I selected colors for acceptable contrast by converting RGB to YIQ, a color space that better reflects human perceptions. Last but not least, Mustache is used to pull album data from a JSON file into templates.
I got to play with several exciting HTML5 and CSS3 properties in making this demo, including text-overflow, multi-columns, transitions, animations, and canvas. Unfortunately, this means the demo requires a modern browser. The future can’t come fast enough.
Very very interesting but your demo didn’t seems to work..
I tried Chrome, Safari, FF on my mac.
It worked for me, Chrome btw
Weird, it should work perfectly on Chrome 10+, Safari 5+, Firefox 9+. Tested fine on my Mac.
Excellent technique and implementation Thomas! The effect works for me in: Chrome 25.0.1359 [Canary], Internet Explorer 10.0.8400, Opera 12.0.2, Opera Next 12.10 [beta] build 1644, Firefox 17.01, Pale Moon 15.3.2 — in case you were wondering about support in current browsers.
and thanks for the tip re: color thief and the YIQ ‘color space’
…Rodney
Rodney, thanks for the data point!
I save your demo page in my computer. But If I open in my browser and clic in any album, the browser send me to your website.
And if I change the url code:
<a href=”http://thomaspark.me/project/expandingalbums/#” rel=”nofollow”>
for this:
<a href=”http://mysite/#” rel=”nofollow”>
It is no working.
I hope you can help me.
Thanks a lot. Manuel
I made the original files downloadable here: http://thomaspark.me/project/expandingalbums/expandingalbums.zip
If you’re viewing it locally, it’ll work in Safari and Firefox but not Chrome.
Thanks a lot is work fantastic!
Seems to work only in IE9+, is there a fix for older versions as well?
The demo relies on the App Folders jQuery plugin — you can open an issue requesting IE8 support here: https://github.com/spsaucier/app-folders
Hello, firstable, wonderfull work. The demo works perfectly for me.
I want to use this plugin on my website (can I? of course, will put a link
) to show a gallery. I have some knowledge on JS but i’m not really good. It is possible to delete the color-thief and set a triangle and just one color for everything? Also want to delete the tracklist and put informations about my image in div or anything else.
It is really complicated to do for a beginner?
Sorry for my english and thanks again!
Benoit, FR
Hey Benoit, if you wanna recreate this demo without the color effects, all you need is jQuery + App Folders. Check out app-folders.com for everything you need.
Oh, ok thanks very much!
Wow, very nice!
Is it possible to add links to each track, or html in general in the tracklist”popup”?
Thanks Nick! Yep, it’s possible to do that, although I didn’t go that far with this proof-of-concept.
Hi Thomas, thanks for the reply. Will have a closer look into it then
love that you can link directly to an album, simply amazing!
Hey Thomas, great work!
This is the kind of thing I had hoped people would build when I created App-Folders in the first place.
I’ve worked some of your changes into the latest commit, including a new option to “instaSwitch” which folder is active at the moment.
Hey Stephen, thanks for stopping by, and awesome job on your App Folders plugin. Cool to see some of my changes make their way into your project!
@thomaspark VERY NICE WORK!!!
Is it possible within the folder to add images instead of text or a combination of the two? Thanks
Wow!!! This is awesome!!!
I’ve just found that I really want!
I’d like to use this on wordpress. Can you help me how can I put this on the wordpress?
or Do you have any plan to make WordPress plug in?
I really use this on my wordpress!!
Sadly I don’t have any plans to turn this into a WordPress plugin. But it should be pretty easy if someone wants to take a stab at it.
So sad T_T
If I can make it I will let you know if you don’t mind.
And Thank you again.
Have a good day Thomas
Great Job… is possible to incorporate , for php and mysql, i wanna take the info from the database, can you help me… sorry for my english
hello this is very well project but i have a problem width J SON data of that
could you send me a version that built width HTML
that the DIVS load width HTML codes not from a j son data and the mustache.js script