Easy Accordion Plugin


Suivez le guide !

Easy Accordion Plugin

Easy accordion plugin est un menu très simple et efficace pour présenter des slides de manière simple et efficace.


Suivez le guide ! Description et informations générales

Easy Accordion Plugin est un menu Jquery dit « en accordéon » ou le menu défile horizontalement via des petites slides. Extrêmement flexible, il supporte tous les contenus : images, texte, listes...etc.

Très customisable via le Css: hauteur-largeur, padding, background... il fonctionne sur tous les navigateurs récents vous permettant ainsi de rendre votre création cross-plateforme (ne dépend pas du navigateur utilisé).

Il comporte aussi des options comme le défilement auto, la gestion de la vitesse de transition et le choix du slide de départ.

Auteur : Andrea Cima Serniotti
Source : Madeincina
Date de réalisation : 13 septembre 2010




Suivez le guide ! Démo

Avant toute chose, voici trois exemples d'utilisation du plug-in :

premiere slide

La première slide

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus

Seconde slide

Voici la seconde slide

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus

encore une slide

Encore une slide

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus

Et encore une

Puis encore une autre

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus

Incroyable !

Incroyable ! Encore une !

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus

Slide finale

Voici finalement la dernière.

Alt text to go hereCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.
En savoir plus



Titre du slide

Le 1er mammouth

Alt text to go hereLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.

une autre slide

Mammouth joyeux !

Alt text to go hereAenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget.

Troiseme slide

Le charmeur

Alt text to go hereIpsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

derniere slide

Ma préféré

Alt text to go hereCum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.



1er slide

Première slide

Alt text to go hereLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.

2eme slide

Placer le titre

Alt text to go hereAenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget.

3eme slide

Ici se trouve le titre

Alt text to go hereIpsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Enfin la derniere

Slide finale

Alt text to go hereCum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.




Suivez le guide ! Configuration et mise en place

Easy Accordion Plugin est très facile de mise en place.

Tout d'abord, on commence par construire notre liste d'éléments, nos slides, comme une simple liste dans une div :


  1. <div id="id-de-votre-div">
  2.    <dl>
  3.       <dt>Titre de la slide</dt>
  4.       <dd>Vous pouvez mettre n'importe quel contenu (divs, texte, images, etc.)...</dd>
  5.       <dt>2eme slide</dt>
  6.       <dd>Vous pouvez mettre n'importe quel contenu (divs, texte, images, etc.)...</dd>
  7.       <dt>Et encore une...</dt>
  8.       <dd>Vous pouvez mettre n'importe quel contenu (divs, texte, images, etc.)...</dd>
  9.    </dl>
  10. </div>

Vous pouvez spécifier quelle slide doit être active lors du premier affichage de l'accordéon. Pour cela, il vous suffit d'ajouter la classe « active » à la slide choisit comme ceci :

  1. <div id="id-de-votre-div">
  2.    <dl>
  3.       <dt>Titre de la slide</dt>
  4.       <dd>Vous pouvez mettre n'importe quel contenu (divs, texte, images, etc.)...</dd>
  5.       <dt>2eme slide</dt>
  6.       <dd>Vous pouvez mettre n'importe quel contenu (divs, texte, images, etc.)...</dd>
  7.       <dt class="active">Slide de départ</dt>
  8.       <dd>Cette slide s'affichera en premier !</dd>
  9.    </dl>
  10. </div>

 

Maintenant que nos slides sont en place, nous allons ajouter notre JQuery en important simplement notre fichier javascript. En voici son contenu :

  1. $(document).ready(function () {
  2.   $('#id-de-votre-div').easyAccordion({
  3.       autoStart: true,
  4.       slideInterval: 5000,
  5.       slideNum:false 
  6.   });
  7. });

Notez qu'il est très important que votre accordéons soit encapsulé dans une balise div qui porte le même nom de celui précisé dans le code sans quoi le plug-in ne fonctionnera pas.




Dans ce plug-in, il existe 3 paramètres que vous pouvez configurer.

Le 1er paramètre vous permet d'activer le défilement-auto des slides. Si le paramètre n'est pas précisé ou sa valeur est fixé à « false », vous obtiendrez alors un simple slideshow.

  1. autoStart: true

Le second, complémentaire du premmier permet de règler le temps d'attente entre le défilement de 2 slides. Par défaut, cette valeur est de 3000 soit 3 secondes.

  1. slideInterval: 5000

Enfin, vous pouvez désactiver les numéros que l'on trouve en bas de chaque slide en précisant simplement la valeur du paramètre « slideNum » à « false » au lieu de « true ». Ce paramètre est activé par défaut.

  1. slideNum:false

Pensez enfin à importer le Css pour permettre le bon agencement du tout.

Notez que dans le CSS fourni, vous trouverez deux différentes zones de CSS dont une entourée de commentaire. Il est recommandé de ne pas toucher cette partie si vous ne savez pas exactement ce que vous faites. Cette elle qui met en place correctement les slides.

La seconde partie peut être modifiée sans restriction.