CoverFlow avec Protoype JS

ProtoFlow c’est quoi ?
ProtoFlow est un effet coverflow écrit en Javascript. Il utilise les libraires Prototype et Scriptaculous pour l’essentiel du travail et Reflection.js pour les effets de réflections d’image.
Pourquoi ?
Et bien principalement parce que cet effet est devenu à la mode avec Apple qui l’implémente un peu partout (iTunes, puis iPod, iPhone,…) puis repris par beaucoup de développeurs. Il existe plusieurs « Cover-flow like » en javascript, mais ProtoFlow est le seul que j’ai trouvé utilisant Prototype.
Comment ?
C’est très simple:
Ajouter Prototype, Scriptaculous et Reflection.js à votre page
Ajouter ProtoFlow.js et ProtoFlow.css à votre page
Ajouter le Markup et un onLoad event (comme décrit ci-dessous)

Mise en oeuvre:

Code HTML:

<div id="myCoverFlow">
<a href="http://www.google.com"><img src="image1.jpg" alt="Caption for this image 1"/></a>
<a href="http://www.google.com"><img src="image2.jpg" alt="Caption for this image 2"/></a>
<a href="http://www.google.com"><img src="image3.jpg" alt="Caption for this image 3"/></a>
.....
<a href="http://www.google.com"><img src="imageN.jpg" alt="Caption for this image N"/></a>
</div>

Initialisation de ProtoFlow:

Event.observe(window, 'load', function(evnt) {
var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
startIndex: 2, // Image sélectionnée par défaut
slider: true, // afficher ou pas le slider
captions: true, // afficher ou pas la légende (par défaut false)
useReflection: false, // Reflet ou pas (a noté que celà va ralentir l'effet)
enableOnClickScroll: true // Scroll avec le click
});
});

Et boom, c’est terminé
ProtoFlow est développé par DeenSoft