jCoverflip – Plugin jQuery – Le Coverflow simple et efficace

Je reviens avec un article sur un plugin jQuery qui va vous permettre de réaliser un ou plusieurs Coverflow de manière simple et efficace. Je dis simple si vous possédez des notions de jQuery, bien entendu. Ce plugin, c’est jCoverflip, qui utilise le framework javascript jQuery (normal) et jQuery UI (disponible ici).

jquery-jcoverflip-plugin-js-coverflow

Voici un exemple basique de l’utilisation de ce plugin jQuery :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="jquery.jcoverflip.js"></script>

Appel des librairies utiles au bon déroulement des opérations

<script type="text/javascript">
  $(function(){
    $('#flip').jcoverflip();
  });
</script>

L’élément avec l’ID #flip se verra touché par l’effet de jCoverflip.

<ul id="flip">
    <li><a href="..."><img ... /><span class="title">My title</span></a></li>
    <li><a href="..."><img ... /><span  class="title">Another title</span></a></li>
    ...
  </ul>

On s’aperçoit que l’élément avec l’ID #flip est une liste « ul » avec lien, image et titre. Pour le titre, il est possible d’utiliser l’attribut « alt » de l’image ou bien d’utiliser un attribut title dans le « li ».

Et là votre Coverflow est fonctionnel.

Bien entendu, il y a de multiples options et variantes, options disponibles sur cette page.

A savoir qu’une version pour Drupal existe.

Retrouver le plugin téléchargeable sur ce lien et une démonstration ici.

Par contre on s’aperçoit que le plugin jCoverflip est utilisé avec une version 1.3 de jQuery, à l’heure où j’écris ces lignes nous en sommes à la 1.7, donc à tester sous cette dernière version.

Bon code à tous !

EDIT DU 02.01.2012 :
Le plugin ne fonctionne pas forcément avec une version récente de jQuery, pour cela, on peut retrouver une version plus fraiche de ce plugin faite par l’auteur et qui devrait fonctionner : https://github.com/NewSignature/jcoverflip

Articles qui peuvent vous intéresser :

Comments
  1. LudiKadmin

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*