zAccordion, un accordéon horizontal avec jQuery

22 mai 2011
3 550 vues

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

  • Alexandre

    Bonjour,
    je viens de voir votre article et suis très intéressé par cet effet arcordéon mais je ne comprends rien a l’instalation. j’ai telecharger jquery et l’ai installé sur mon serveur puis j’ai copier vos lignes de codes dans un widget texte, mais cela ne marche pas , les photo apparaissent les unes sous les autres !

    Comment faire ?

    • http://www.megaptery.com/ Pierre

      Oui j’ai oublié de préciser qu’il faut inclure le framework jQuery et le plugin dans ton document HTML. Si tu n’as pas les connaissances de base pour l’installer, il vaut mieux te former ou demander à quelqu’un. Laisse ton email si tu veux et je t’enverrai un fichier HTML de base avec l’accordéon.

      • Alexandre

        Merci pour cette réponse et proposition d’aide !
        Effectivement je ne comprends rien a l’installation du Jquery (c’est pas faute d’avoir essayer avec differents tutos!).
        Voici donc mon email: uctheworld@live.fr
        d’avance merci !