Cover Flow
Today, I have installed an unveiled a new thing I have been working on for some time. It is a Javascript based Cover Flow concept, which allows you to browse any content visually, like in iTunes.
It is customizable in many ways, in terms of how many items there should be in the flow, which text should be displayed, and to what destination each cover links to when double-clicked. The Cover Flow component is released under the GPLv3. The script itself explains what each thing does.Today, I also have implemented the Cover Flow component into my own website, as a little add-on for the navigation.
SE51.net with the new Cover Flow opened. Rockstar Treatment for the website.I hope you like it =)
The Cover Flow component including all material as seen on SE51
–
Photoshop actions to quickly create Cover Flow items (300 pixels)
================
UPDATE:I have updated the HTML code on the SE51 page. The scrollbar was not displayed on Firefox on Windows, this is now fixed. If you’ve seen the Cover Flow, reload the frame or empty the cache and visit my page again to see the correct version.
It is also correct on Safari for Windows now.
================
UPDATE 2:
I have now put in the component into my iPod + iTunes section, beginning with the most recent addition worth mentioning. As before, you can flip through the flow, and when you double-click the cover in the middle, it’ll take you right to the iTunes Store, with the album selected for you (provided you have iTunes installed).
================
UPDATE 3:
The Cover Flow component can now also run in Internet Explorer. Eric R. Goldberg has supplied me the patch that he mentioned in a comment to this article, and I am now supplying the patch here. The patch file modifies the original JS file to be compatible with Microsoft’s browser.
September 8th, 2007 at 4:04 pm
any demo?
October 5th, 2007 at 11:06 am
This is a incredible script and it works flawless in FF, but it does not work at all on f****ing IE(7)…
October 5th, 2007 at 11:10 am
PS: that includes your iTunes site also!
October 14th, 2007 at 3:49 pm
Hey,
This looks like an amazing script! For some reason when I try to use the action in photoshop cs the pictures do not seem to turn out right? Is there a specific size or something i’m not doing right? Any help would be greatly appreciated!! leeston@gmail.com
October 19th, 2007 at 2:48 am
Hi. I got this completely working in Internet Explorer. How can I provide a patch to you?
Email me at email address provided with this comment.
BTW- kuddos on this. Seriously slick.
Thanks,
Eric Goldberg
October 30th, 2007 at 5:42 pm
Yeay for this script! I was hoping someone would’ve done something like this, so kudos!
November 15th, 2007 at 1:38 pm
Hi, we built something similar and used your actions for the image generation. Kudos!
November 30th, 2007 at 4:59 pm
Am I missing something or can you NOT drag this sideways? Tried in IE7 and FF2 for the PC and I can only click on the arrows left and right to see it. And then it doesn’t actually slide side to side. It just reloads each image individually. While it looks great, that’s not all that impressive.
November 30th, 2007 at 7:25 pm
That is correct. Currently, only the arrow buttons allow for sliding through the items, one per click. You can, however, click on any item in the flow directly, and it will go there.
Also, since it is Open Source, you are welcome to make improvements or enhance the code to make it more impressive.
December 16th, 2007 at 10:29 pm
Hey, thats a great script!!! AMAZING!!! But please anyone can help me??? I downloaded the PhotoShop actions to create the Cover Flow items, but when I try to open it with photoshop nothing shows up??? Any suggestions???
Thanks a lot…
January 31st, 2008 at 11:03 am
Hi, unfortunately the IE Patch from Eric R. Goldberg doesn’t work.
I have modified the coverflow.js with the lines of the coverflowie7.patch - but no changes in IE.
January 31st, 2008 at 11:07 am
Hi Saphira,
I have never tested the patch on IE, I have only provided the third party code.
April 20th, 2008 at 6:19 am
Thanks for this and for the Photoshop action
May 15th, 2008 at 9:12 am
cool stuff ! but someone did better on :
http://mediaeventservices.com/demo/gallery/gallery.html
new version coming soon ?
many thks
June 24th, 2009 at 2:09 pm
Hi,..Excellent script but again that IE really $%^%$.. even the patch cant do anything…