Click here to join 1000 satisfied readers Get in touch Click here to join 1000 satisfied readers Portfolio Read my blog Home

Here you can find my latest tutorials, blog posts or you can hire me to help your business grow.

Enjoy your visit.

Delicous saves: 0
  Buzz it

Open-Source JavaScript CoverFlow

by admin | September 18, 2009 | In Code Samples, Resources

 

cpreview

 

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.

Tagged as: , , , , , , , , , ,

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

41 Responses »

  1. Chase on September 25, 2009 at 5:16 am:

    This is great. I might be about to take on a photography portfolio project and this might be just the thing I'm looking for. Do you know if this will work in conjunction with various jquery plugins?

    Thanks very much for sharing!

  2. Chase on September 25, 2009 at 5:16 am:

    This is great. I might be about to take on a photography portfolio project and this might be just the thing I'm looking for. Do you know if this will work in conjunction with various jquery plugins?

    Thanks very much for sharing!

  3. Chase on September 25, 2009 at 5:19 am:

    Oh yeah, and is any of the functionality affected by the size of the photos?

  4. Chase on September 25, 2009 at 5:19 am:

    Oh yeah, and is any of the functionality affected by the size of the photos?

  5. Addy on September 25, 2009 at 5:36 am:

    The CoverFlow is coded using pure JavaScript so if you would like to patch it up to some jQuery Plugins all you need to do is hook up the relevant functions in the Coverflow's main JS File. Hope that helps!

  6. Addy on September 25, 2009 at 5:36 am:

    The CoverFlow is coded using pure JavaScript so if you would like to patch it up to some jQuery Plugins all you need to do is hook up the relevant functions in the Coverflow's main JS File. Hope that helps!

  7. Addy on September 25, 2009 at 5:37 am:

    You are able to specify the width and height of the photos used. As long as they all share the same dimensions you shouldnt run into any issues.

  8. Addy on September 25, 2009 at 5:37 am:

    You are able to specify the width and height of the photos used. As long as they all share the same dimensions you shouldnt run into any issues.

  9. CoverFlow en Javascript Open Source | aNieto2K on September 25, 2009 at 12:38 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  10. CoverFlow en Javascript Open Source | aNieto2K on September 25, 2009 at 12:38 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  11. CoverFlow en Javascript Open Source : Blogografia on September 25, 2009 at 1:20 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  12. CoverFlow en Javascript Open Source : Blogografia on September 25, 2009 at 1:20 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  13. Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow on September 25, 2009 at 1:28 pm:

    [...] Read more: Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow [...]

  14. Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow on September 25, 2009 at 1:28 pm:

    [...] Read more: Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow [...]

  15. Efecto CoverFlow con JavaScript y HTML5 « In Nomine Pixel on September 25, 2009 at 7:19 pm:

    [...] Link: Open-Source JavaScript CoverFlow | Demo Categorías:HTML, Javascript, Tutoriales Etiquetas:coverflow, efectos, html5, Javascript Comentarios (0) Trackbacks (0) Deja un comentario Trackbacks [...]

  16. Efecto CoverFlow con JavaScript y HTML5 « In Nomine Pixel on September 25, 2009 at 7:19 pm:

    [...] Link: Open-Source JavaScript CoverFlow | Demo Categorías:HTML, Javascript, Tutoriales Etiquetas:coverflow, efectos, html5, Javascript Comentarios (0) Trackbacks (0) Deja un comentario Trackbacks [...]

  17. Chase on September 26, 2009 at 8:20 am:

    Thanks very much for the answers. :thumbsup:

  18. Chase on September 26, 2009 at 8:20 am:

    Thanks very much for the answers. :thumbsup:

  19. links for 2009-09-26 – Dubo.cl on September 26, 2009 at 11:04 am:

    [...] Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow Como hacer un coverflow con canvas y javascript. Solo para navegadores modernos por ahora. (tags: howto tutorial javascript css canvas opensource) blog comments powered by Disqus var disqus_url = 'http://dubo.cl/links-for-2009-09-26/ '; var disqus_container_id = 'disqus_thread'; var facebookXdReceiverPath = 'http://dubo.cl/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; var DsqLocal = { 'trackbacks': [ ], 'trackback_url': 'http://dubo.cl/links-for-2009-09-26/trackback/' }; « links for 2009-09-24 Old Popular Yolk theme for WordPress by Joshua Goodwin var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); var pageTracker = _gat._getTracker("UA-5867128-1"); pageTracker._initData(); pageTracker._trackPageview(); [...]

  20. links for 2009-09-26 – Dubo.cl on September 26, 2009 at 11:04 am:

    [...] Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow Como hacer un coverflow con canvas y javascript. Solo para navegadores modernos por ahora. (tags: howto tutorial javascript css canvas opensource) blog comments powered by Disqus var disqus_url = 'http://dubo.cl/links-for-2009-09-26/ '; var disqus_container_id = 'disqus_thread'; var facebookXdReceiverPath = 'http://dubo.cl/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; var DsqLocal = { 'trackbacks': [ ], 'trackback_url': 'http://dubo.cl/links-for-2009-09-26/trackback/' }; « links for 2009-09-24 Old Popular Yolk theme for WordPress by Joshua Goodwin var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); var pageTracker = _gat._getTracker("UA-5867128-1"); pageTracker._initData(); pageTracker._trackPageview(); [...]

  21. ContinousLearner: Links (9/27/2009) | Astha on September 27, 2009 at 9:47 pm:

    [...] Open-Source JavaScript CoverFlow [...]

  22. ContinousLearner: Links (9/27/2009) | Astha on September 27, 2009 at 9:47 pm:

    [...] Open-Source JavaScript CoverFlow [...]

  23. Interesting Finds: 2009 09.22 ~ 09.30 - gOODiDEA.NET on September 29, 2009 at 11:31 pm:

    [...] Open-Source JavaScript CoverFlow [...]

  24. Interesting Finds: 2009 09.22 ~ 09.30 - gOODiDEA.NET on September 29, 2009 at 11:31 pm:

    [...] Open-Source JavaScript CoverFlow [...]

  25. Efecto Coverflow gratis en JavaScript, Carrero on October 1, 2009 at 9:02 pm:

    [...] jCoverFlow en Javascript. Ver Demostración jCoverflow. vía: anieto2k y Addi Osmani Etiquetas: canvas, chrome, coverflow, firefox, imágenes, javascript, os x, safari, [...]

  26. Efecto Coverflow gratis en JavaScript, Carrero on October 1, 2009 at 9:02 pm:

    [...] jCoverFlow en Javascript. Ver Demostración jCoverflow. vía: anieto2k y Addi Osmani Etiquetas: canvas, chrome, coverflow, firefox, imágenes, javascript, os x, safari, [...]

  27. AdamN on October 2, 2009 at 5:12 pm:

    This is awesome – do you think you could move the project to a better site than sourceforge? Google Code, Github, BitBucket?

    It's a pain to work in Sourceforge.

  28. AdamN on October 2, 2009 at 5:12 pm:

    This is awesome – do you think you could move the project to a better site than sourceforge? Google Code, Github, BitBucket?

    It's a pain to work in Sourceforge.

  29. Addy on October 2, 2009 at 5:31 pm:

    I'm glad you like it! – To get the sources from Google Code please see this entry:

    http://code.google.com/p/javascript-coverflow/dow...

  30. Addy on October 2, 2009 at 5:31 pm:

    I'm glad you like it! – To get the sources from Google Code please see this entry:

    http://code.google.com/p/javascript-coverflow/dow...

  31. CoverFlow en Javascript Open Source | Omeyas Web on October 3, 2009 at 2:25 am:

    [...] estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  32. CoverFlow en Javascript Open Source | Omeyas Web on October 3, 2009 at 2:25 am:

    [...] estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  33. CoverFlow en Javascript « NewsLinux Asycom on October 3, 2009 at 4:08 pm:

    [...] Si estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. [...]

  34. CoverFlow en Javascript « NewsLinux Asycom on October 3, 2009 at 4:08 pm:

    [...] Si estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. [...]

  35. CoverFlow en Javascript Open Source « NewsLinux Asycom on October 6, 2009 at 10:59 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  36. CoverFlow en Javascript Open Source « NewsLinux Asycom on October 6, 2009 at 10:59 pm:

    [...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]

  37. 13 Incredibly Fresh New HTML5 Canvas Demos | AddyOsmani.com | Where Web Businesses Grow on October 8, 2009 at 3:52 pm:

    [...] so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes CoverFlow effect with the canvas element.  With 3D, Vector graphics and more coming to a Browser near [...]

  38. 13 Incredibly Fresh New HTML5 Canvas Demos | AddyOsmani.com | Where Web Businesses Grow on October 8, 2009 at 3:52 pm:

    [...] so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes CoverFlow effect with the canvas element.  With 3D, Vector graphics and more coming to a Browser near [...]

  39. Avery on December 17, 2009 at 12:48 am:

    Excellent blog. I think site Navigation is pivotal in great website design!

  40. Avery on December 17, 2009 at 12:48 am:

    Excellent blog. I think site Navigation is pivotal in great website design!

  41. Kristalyn Foster on March 10, 2010 at 10:24 pm:

    Disqus is commenting plug-in it is too easy to use as well as Intense Debate is going and allow developers to make a plug-ins like a Youtube video etc .I think both are too important for us.

Leave a Reply