Choix de la langue :

Menu Principal

Ligams » Publications » Javascript » Tutoriel : créer un slideshow avec jQuery

Tutoriel : créer un slideshow avec jQuery

Bousculons un peu les habitudes, même s'il est vrai que la technologie flash permet de réaliser des applications multimédias riches, il est préférable dans bien des cas d'utiliser Javascript, nous allons voir que l'on peut réaliser des animations sympa en quelques lignes de code.

Pré-requis : HTML, Javascript, notion des sélecteurs jQuery, CSS

Vous pouvez voir le résultat sur cette page de démonstration.

Pas d'import de bibliothèque

Là par contre, je suis un peu plus réticent, si l'ajout du framework jQuery (ou un autre, comme YUI, Mootools ou prototypeJS) est un atout certain en terme de gain de temps, je suis plus mitigé sur l'intégration de la majorité des bibliothèques annexes (pour la plupart) :

• Elles ne sont souvent pas maintenues,
• elles sont souvent codées approximativement,
• lorsqu'elles requièrent une techno serveur, elles peuvent être synonymes de failles.

J'étaye un peu mon argumentation : le site Ligams est entrain d'être refondu, et nous avons souhaité y mettre un petit slideshow en page d'accueil, j'ai tout d'abord regardé les existants en la matière, ne souhaitant pas particulièrement coder. J'ai trouvé mon bonheur (même plusieurs fois) mais j'ai constaté avec effroi la complexité du code pour faire une chose très simple au final, et ai décidé de le coder moi-même, et ce code n'excède pas 30 lignes, ce sans avoir recours à une bibliothèque externe quelconque (gain de poids, gain de maintenance, peu de risque d'avoir à faire une mise à jour vu que je n'utilise que le core de jQuery).

Le HTML

Commençons par le HTML, je ne souhaite pas réellement entrer dans un débat sémantique, mais considérons que les images de notre slideshow sont listés dans un conteneur : cela nous donnera div > ul > li.

Schématiquement, cela donne ceci :

Nous auront donc le HTML suivant auquel nous ajoutons 2 liens (suivant et précédent) :

<div id="billboard">
    <ul>
        <li class="li_1"></li>
        <li class="li_2"></li>
        <li class="li_3"></li>
    </ul>
    <div id="nav">
        <p><a id="next" href="#">Suivant</a> | <a id="prev" href="#">Précédent</a></p>
    </div>
</div>

La feuille de style CSS :

Mettons cela en forme désormais : nous souhaitons que le conteneur (identifié billboard) ait une taille fixe et que les éléments se fixent par rapport à celui-ci, nous optons donc pour une position relative, et ajoutons l'attribut overflow:hidden pour éviter que l'extérieur de ce conteneur ne soit visible (ou scrollé) :

#billboard{ 
  position:relative;
  width:900px;
  height:200px;
  overflow:hidden;
  margin:0 auto; 
}

Concernant la liste, nous supprimons les marges (sur UL et LI), le style de liste (pour éviter le pictogramme), et donnons au LI une position absolue :

#billboard ul,#billboard li{
  margin:0;
  padding:0;
}
#billboard li{
  position:absolute;
  width:900px;
  height:200px;
}

Notez au passage que la taille des LI est identique à celle du conteneur.

Le Javascript

Je pense avoir suffisamment documenté le code pour qu'il soit facilement compréhensible :

var BillBoard = {};
//index courant
BillBoard.current = 0;
//contient le nombre de slides
BillBoard.num = 0;

/**
   * initialise le slideshow : 
   * place les slides
   *  attache les événements
   */
initBillBoard = function(){
    // on place les éléments de liste
    $("#billboard li").each(function(i){
        BillBoard.num++;
        var _leftPX = (i)*900;
        $(this).css('left',_leftPX+'px');
        $(this).css('top','0px');
        $(this).show();
    });
    //(ajuste le total de slides)
    BillBoard.num--;
    //attache les évéments
    $("#prev").click(prevBill);
    $("#next").click(nextBill);
}
/**
   * affiche la diapo suivante
   */
nextBill = function(){
    //calcul du prochain index (si max, on revient au début)
    var _next = (BillBoard.current+1>BillBoard.num)? 0 : BillBoard.current+1;
    moveBills(_next);
    return false;
}
/**
   * affiche la diapo précédente
   */
prevBill = function(){
    //calcul du prochain index (si min, on va à la fin)
    var _next = (BillBoard.current-1<0)? BillBoard.num : BillBoard.current-1;
    moveBills(_next);
    return false;
}
/**
   * affiche la diapo dont l'index est passé en paramètre
   */
moveBills = function(index)
{
    //replace les li en les animant
    $("#billboard li").each(function(i){
        var _leftPX = (i-index)*900;
        
        $(this).animate({left:_leftPX+'px'},500);
    });
    //réaffecte l'index courant
    BillBoard.current =index;
}
//initialise la page après son chargement
$(document).ready(function(){
    initBillBoard();
});

Retirez les commentaires et vous constaterez qu'en quelques lignes vous avez créé un slideshow sympa sans vous encombrer d'un lourde bibliothèque ennuyeuse.

J'ai volontairement contenu les images dans des LI, car vous pouvez y intégrer ce que vous voulez : texte, image, flash...

• Notez que la fonction moveBills() vous permet de générer une liste à numéro pour cliquer sur l'image que vous souhaitez directement, ce n'est pas très difficile à réaliser (il en va de même pour d'éventuels aperçus...).
• Notez également que ce slideshow n'est pas restrictif en terme de nombre d'images : vous pouvez en mettre autant que vous souhaitez, il s'adaptera !

Téléchargement

Ce fichier contient

• HTML
• CSS
• Javascript
• Des images d'exemples

Conclusion

Cessez de vous encombrer avec des plugins jQuery lorsque ce n'est pas justifié ! c'est compréhensible pour certaines bibliothèque d'interface utilisateurs et d'autres trucs, mais certainement pas pour des éléments tels que celui là, facilement réalisable.

Aller plus loin : dans le cadre de l'accessibilité, il est bien sur possible d'aller bien plus loin : en imaginant la gestion des focus, voire même une génération totale de l'animation en Javascript (avec un affichage par défaut affichant tout pour les personne n'ayant pas ce support) : c'est néanmoins un petit peu intégriste :)

Articles connexes

• Carrousel Javascript
• Evénement javascript : addEventListener, attachEvent
• Ajax xmlHttpRequest
• POO : Créer une classe en Javascript

Commentaires