Hi guys. I’m making some more of my custom components available for download today. The Apple iTunes CoverFlow effect is one the nicest forms of visualizing albums and images that I’ve seen over the past few years and I’ve always wondered..could the effect be done using JavaScript and no Flash whatsoever?. The answer is yes and I’d like to share with you my new Pure JavaScript CoverFlow component (which doesn’t rely on jQuery, YUI or any other frameworks to work! 
.
The effect is made possible using the HTML5 Canvas element which takes care of all the image processing work (eg. reflections and tilts etc). I’ve seen previous implementations that use PHP to achieve this but I think a true implementation should be able to do all of this at the client side – hopefully my version lives up to that.
For readers who haven’t checked it out before, the CoverFlow includes keyboard navigation, one-click flip and tilt access to any item in the stack, a built-in lightbox for viewing higher resolution images, HTML album previews and much more.
With release 2.0.1 one of the important things that have been addressed is increased cross-browser compatibility with Google Chrome 2.0 +, FireFox 3.5 + and Safari 4.0 also now supported. The newest version of the component can be downloaded from SourceForge via the link below. Please feel free to share it and let me know what your thoughts are on it.
Screencast: Watch this component in action right here
Demo: Launch the FireFox/Chrome/Safari compatible demo here
Download: Get the sources via SourceForge
New: You can also download an alternative version of the CoverFlow done using YUI right here.
I just really dig JavaScript. I'm a writer, speaker and a JavaScript developer for AOL (yes, we're still around!).
I am thinking to use this coverflow for my next project i.e. photography portfolio because this is the almost perfect thing to what I was looking for. Just hope that it works in conjunction with other jquery plugins too.
Hello, buddy, your stuff is so great, i am now learning your code and want to make some change, first there is one question,it works perfect in safari and firefox, but in chrome, there is no reflection effect here, and i do not know why.
And do you think it's possible to make it dragable so i can use it on my ipad.
Hey Edward. If you're looking for something to use on the iPad I strongly recommend using Z-Flow as this supports iPad/phone slide interactions.
Descobri tantas coisas.
Tantas. Tantas.
Existe tanta coisa mais importante nessa vida que sofrer por amor. Que viver um amor.
Tantos amigos. Tantos lugares. Tantas frases e livros e sentidos. Tantas pessoas novas.
Indo. Vindo.
Tenho só um mundo pela frente.
E olhe pra ele. Olhe o mundo! É tão pequeno diante de tudo o que sinto.
Sofrer dói. Dói e não é pouco. wholesale Juicy HandbagsMas faz um bem danado depois que passa.
Descobri, ou melhor, aceitei: eu nunca vou esquecer o amor da minha vida. Nunca. Mas agora, com sua licença. Não dá mais para ocupar o mesmo espaço.
Meu tempo não se mede em relógios.
E a vida lá fora, me chama!
Hey
I love the work you have done on this coverflow. It really is a great way to present content. I have a quick question regarding the back-end of the coverflow. I am new to programming so please bare with me. I want to use your coverflow on http://responsibly.com to showcase projects. Pictures and all information for the projects will be taken from the donorchoose.org API (http://developer.donorschoose.org/). Is it possible to connect the coverflow with an external API and pull information in? I have a team of back-end and front-end programmers creating the site now, and I am looking for the appropriate coverflow to achieve this. Please let me know. Thanks
Hey Stuart! Thanks for your comments. The way that I would approach solving your desire to use a Coverflow is as follows: You will likely want to target this cross-browser. If so, I recommend using either this or my recent CSS3 Coverflow (please see the homepage for this) for modern browsers with perhaps a Flash fall-back for older browsers such as IE6/7/8 (a free flash coverflow component is also available). In terms of connecting the information from the backend to this is quite straight-forward. All you would need to do is output the array of data needed for the CoverFlow via JSON (look at the structure of the covers used in the above implementation). Alternatively an easier approach would be using the CSS3 CoverFlow as that just requires a UL/LI list of images with titles and alt text in order to use it. I hope that answers your question!
check this out: http://coulisse.luvdasun.com/
i am planning on releasing it as a jquery plugin.
Another lovely Cover flow script. I'll add this to my list of favourites.
This is really impressive. There are two things I was wondering, however. How to add a "cover"? I tried to add a few more covers, but after 13 it seems to break it.
My mind is spinning with ideas for this excellent script thank you.
Hi everyone, this script is great. But I'm having problems using it with Internet Explorer and with Chrome. Does anyone can help me? Thanks a lot in advance.
This only works in Firefox. I'd love to see a version that is cross-browser compatible.
it's great thank you for infos
@flow You can fix that by trying different values on line 55 of ui.coverflow.js:
"this.itemSize = 0.79 * this.items.innerWidth();"
@addy Do you know why some pictures are "shaking" for a second in IE7, after scrolling to any picture in the coverflow?
Or does anyone else know a fix for that?
You\’re welcome!