zAccordion, un accordéon horizontal avec jQuery

22 mai 2011

zAccordion est un plugin jQuery qui permet de créer un accordéon horizontal très facilement. Comparable à un slider, l’outil utilise une seule transition et offre une vaste gamme d’options : délai d’attente entre les diapositives, vitesse de transition, pagination automatique…

Votre premier accordéon

Les accordéons jQuery sont très utiles pour empiler du contenu, par exemple des images glissées les unes en dessous des autres. C’est donc une alternative originale à l’utilisation d’un slideshow, pouvant aussi bien servir de menu de navigation comme de galerie d’images.

zAccordion s’utilise exactement comme un slider. On commence par inclure jQuery et jQuery Easing (optionnel si vous n’utiliez pas les fonctions « easing »). Le code HTML est assez simple. On définit une liste à puces et chaque puce contient une image.

<ul id="featured">
   <li>
      <image src="/images/diner.jpg" width="600" height="310" alt="Old School Diner" />
   </li>
   <li>
      <image src="/images/pool.jpg" width="600" height="310" alt="Vintage Pool" />
   </li>
   <li>
      <image src="/images/gas.jpg" width="600" height="310" alt="Retro Gas Pump" />
   </li>
   <li>
      <image src="/images/car.jpg" width="600" height="310" alt="Old Car Steering Wheel" />
   </li>
</ul>

Puis on fait appel au script qui permet de construire l’accordéon avec quelques paramètres. Ici, on utilise un effet « easing », il est donc nécessaire d’inclure jQuery Easing.

$(document).ready(function() {
	$("#featured").zAccordion({ 
		easing: "easeOutBounce",
		timeout: 5500,
		slideWidth: 600,
		width: 960,
		height: 310
	});
});

Les options

Voici les principales options pour configurer zAccordion. Il en existe une vingtaine au total.

  • timeout : délai entre deux slides (ms)
  • width : largeur du conteneur
  • height : hauteur du conteneur
  • slideWidth : largeur d’une slide
  • slideHeight : hauteur d’une slide
  • easing : utilisation des méthodes « easing »
  • trigger : événement pour déclencher l’animation (‘click’, ‘mouseover’, etc.)

Comme beaucoup d’autres plugins jQuery d’animation, zAccordion utilise le plugin jQuery Easing pour générer des transitions plus complexes. Cependant, vous pouvez vous en passer dans le cas de zAccordion, .

Requis : jQuery
Démonstration : http://www.armagost.com/zaccordion/
Licence : libre

Commentaires