Javascript est de plus en plus impressionnant. Vous pouvez maintenant créer un coverflow avec quelques lignes de code grâce à ProtoFlow.
ProtoFlow utilise Prototype.js et Scriptaculous afin de vous générer facilement votre Coverflow.
Cette application mac très à la mode est maintenant à la portée de tous les webmasters. Reste à trouver une bonne utilisation.
Vous pouvez créer votre protoflow comme ceci:
-
-
<div id="protoflow">
-
-
<img src="imgs/DSCN0940_91360.jpg"/>
-
-
<img src="imgs/stimme_von_oben_187192.jpg"/>
-
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
-
<img src="imgs/farbraum_012_147508.jpg"/>
-
-
<img src="imgs/IMG_4906_199357.jpg"/>
-
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
-
<img src="imgs/Fries_201253.jpg"/>
-
-
<img src="imgs/Fries_201253.jpg"/>
-
-
</div><ul id=”protoCaptions” class=”protoCaptions”>
-
-
<li>Caption 1</li>
-
-
<li>Caption 2</li>
-
-
<li>Caption 3</li>
-
-
<li>Caption 4</li>
-
-
<li>Caption 5</li>
-
-
<li>Caption 6</li>
-
-
<li>Caption 7</li>
-
-
<li>Caption 8</li>
-
-
</ul>
-
-
-
Event.observe(window, ‘load’, function() {
-
-
cf = new ProtoFlow($("protoflow"), {captions: ‘protoCaptions’});
-
-
});
-
-
options = {
-
-
startIndex: 2, //which image or stack should the widget focus on after init
-
-
slider: true, //show or hide the slider widget
-
-
captions: false //do you want to show captions?
-
-
};
-
Hmm, ça ne me parait pas super original, surtout que les images sont énormes par rapport aux vignettes affichées. Un peu de reflexion.js avec, ça n’aurait pas fait de mal :p
Point de vue accessibilité, ce n’est pas idéal, ils auraient du prendre l’attribut alt et/ou title pour faire les captions…
J’aime de moins en moins les “blink-blink” en JavaScript moi