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 :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.ui.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.jcoverflip.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

 

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

[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%24(function()%7B%0A%20%20%20%20%24(‘%23flip’).jcoverflip()%3B%0A%20%20%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

 

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

[pastacode lang= »markup » manual= »%3Cul%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22…%22%3E%3Cimg%20%2F%3E%3Cspan%20class%3D%22title%22%3EMy%20title%3C%2Fspan%3E%3C%2Fa%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22…%22%3E%3Cimg%20%2F%3E%3Cspan%20class%3D%22title%22%3EAnother%20title%3C%2Fspan%3E%3C%2Fa%3E%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Ful%3E%0A…%0A » message= » » highlight= » » provider= »manual »/]

 

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 :

Author: Franck Pertegas

Share This Post On

1 Comment

Trackbacks/Pingbacks

  1. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog | jCoverflip | Scoop.it - [...] jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog Je reviens avec un article sur un…
  2. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog | Développement Web et sites | Scoop.it - [...] jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog Je reviens avec un article sur un…
  3. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog | Node Js, CSS3 and all futur | Scoop.it - [...] jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog Je reviens avec un article sur un…
  4. s3Slider – Plugin jQuery – Un slider simple pour vos sites web | LudiBlog - [...] jCoverflip – Plugin jQuery – Le Coverflow simple et efficace [...]
  5. carousels | Pearltrees - [...] jCoverflip – Plugin jQuery – Le Coverflow simple et efficace [...]

Submit a Comment

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