jQuery jCarousel Plugin

jCarousel est un plugin jQuery permettant de contrôler une liste verticale ou horizontale d'éléments. Ces éléments (statiques ou chargés via ajax)peuvent ensuite être déplacés d'avant en arrière ou de bas en haut (avec ou sans animation). Très pratique pour les galeries d'images par exemple. Source et © Jan Sorgalla.
  • Ressource Précédente
  • Télécharger
  • Ressource Suivante

Démonstration

Implémentation

Les fichiers à inclure pour utiliser ce plugin sont les suivants: la librairie jqueyr, le script du plugin, et 2 feuilles de style additionnelles. Une qui s'occupe de la structure du carousel et une autre pour le look, aussi appelé skin.

  1. /** jQuery Inclusion **/
  2. <script type="text/javascript" src="Chemin_vers/jQuery.js"></script>
  3. /** Plugin Inclusion **/
  4. <script type="text/javascript" src="Chemin_vers/jquery-carousel.js"></script>
  5. /** Style requis **/
  6. <link href="Chemin_vers/carousel.css" rel="stylesheet" type="text/css" />
  7. <link href="Chemin_vers/skinname.css" rel="stylesheet" type="text/css" />
La mise en place du carousel doit être faite dans le header de la page ou dans un fichier .js à part. La façon la plus simple de faire marcher le carousel est d'utiliser le code suivant
  1. <script type="text/javascript">
  2.   jQuery(document).ready(function() {
  3.     jQuery("#mycarousel").jcarousel();
  4.   });
  5. </script>

Nous devons donc maintenant créer le code html du carousel.

Il devra être composé d'un conteneur, par exemple une liste ul ayant le même id que celui spécifié dans le JavaScript.(dans notre cas #mycarousel).

Comme nous l'avons mentionné a début le craoussel a une feuille de style spéciale pour son look. Pour faire marche ce style avec le carousel, il va falloir spécifier le nom de la skin dans la classe même du carousel:

  1. <ul id="mycarousel" class="jcarousel-skin-name">
  2.   <li>L_CAROUSEL_ITEM 1</li>
  3.   <li>L_CAROUSEL_ITEM 2</li>
  4.   ...
  5. </ul>

Et voila. L'étape finale consistera juste à ajouter du contenu à votre liste. Chaque élément de la liste deviendra alors un élément du carousel.

Partager:

  • Tweet this
  • Buy the author a coffee
  • Bump this
  • Digg this
  • Post this on Del.icio.us
  • Post this on StumbleUpon
  • Post this on Reddit
  • Post this on Technorati
  • Post this on Google
  • Post this on Facebook
  • Email this to a friend

Vous seriez peut être aussi intéressé par::

  • How to create an Ajax, validated form
  • jQuery Form Validation Plugin
  • Mootools Facebook Search
  • YouTube video manager with PHP, MYSQL & jQuery
  • My Favourite MYSQL functions
  • How to turn any jQuery plugin into a WordPress one

Poster un Commentaire

Commentaires récents

jdmweb
No comments have been posted so far. Be the first!
De jdmweb à 14:04 06/09/10 { Répondre }