desoSlide, prenez le contrôle de votre slideshow avec ce puissant plugin jQuery

Mon projet de slideshow qui n’était à la base qu’un exercice que je me suis infligé pour m’améliorer, est devenu au fur et à mesure quelque chose de plus sérieux.

Et aujourd’hui il prend encore, à mes yeux, plus d’importance car je suis en mesure de présenter une refonte majeure : la version 2.0.0-rc1.

Une bannière c'est toujours plus classe !

Une bannière c’est toujours plus classe !

Une page se tourne, un rapide historique mérite donc d’être dressé.

Historique

  • Décembre 2011 : Première apparition de « desoSlide » en tant qu’exercice pour s’améliorer en jQuery. Demo. Oui il y’a de quoi rire !
  • Mai 2013 : Première version et ajout sur GitHub.
Version 1 du site

Version 1 du site

  • Juillet 2013 : Versions 1.0.1 et 1.0.2.
  • Août 2013 : Version 1.0.3.
  • Septembre 2013 : Versions 1.1.0 et 1.1.1.
Version 2 du site

Version 2 du site

  • Novembre 2013 : Versions 1.2.0, 1.2.1. et 1.2.2.
  • Décembre 2013 : Versions 1.2.3. et 1.2.4.
  • Février 2014 : Version 1.3.0.
  • Mai 2014 : Version 2.0.0-rc1.
Version 3 du site

Version 3 du site

Quoi de neuf ?

Comme vous l’apercevez, l’arrivée de la version 2 de desoSlide a engagé une refonte totale du site (v3 du site). Comme pour la v2 c’est Jaoued qui s’y est collé, avec beaucoup de patience, de persévérance et de professionnalisme. Je l’en remercie encore.

Je me suis occupé donc personnellement de la refonte du code. Notamment l’architecture du plugin qui ne me permettait pas de proposer des méthodes publiques. Tout ou presque a été revu, amélioré, optimisé. Le changement majeur est que le plugin n’est plus appelé sur le même élément que dans la v1.

Appel du plugin

$(function() {

    // Version 1
    $('#thumbs').desoSlide({
        main: {
            container: '#slideshow'
        }
    });

});
$(window).load(function() {

    // Version 2
    $('#slideshow').desoSlide({
        thumbs: $('#thumbs li > a')
        // Ou
        thumbs: $('a.thumb')
    });

});

Premièrement, l’appel du plugin se passe une fois que toutes les images sont chargées et non pas lorsque le DOM est chargé. Je n’ai pas trouvé d’autre moyen que celui-là vis-à-vis des méthodes publiques, sinon il y avait des conflits, des méthodes publiques pouvait être appelées avant que le slideshow ne soit complètement initialisé. Travailler avec des images amène un peu plus de contraintes… Est-elle si insurmontable ? :)

Ensuite l’appel se fait sur le conteneur où sera créé le slideshow, et non pas sur les miniatures comme dans la première version. Ce qui est en fait, beaucoup plus logique. Ainsi on peut cibler n’importe quelle miniature dans le DOM en donnant le sélecteur adéquat. D’ailleurs, le markup (HTML) des miniatures a été simplifié.

Dans la version 1, votre markup devait être un <ul> accompagné de ses <li>, <a> et <img>.
A présent, seul le <a> suivi de <img> est obligatoire. Rien ne vous empêche de les mettre dans une liste.

Options

Je n’ai pas fait l’impasse sur les options, voici celles par défaut :

defaults = {
    thumbs:             null,             // An anchors (`<a>`) collection
    imageClass:         'img-responsive', // Image class(es)
    auto: {
        load:           true,             // Preloading images
        start:          false             // Autostarting slideshow
    },
    first:              0,                // Index of the first image to show
    interval:           3000,             // Interval between each images
    effect: {
        provider:       'animate',        // Effect provider ('animate', 'magic')
        name:           'fade'            // Transition effect ('fade', 'sideFade', 'sideFadeBig', 'flip', 'light', 'roll', 'rotate', 'foolish', 'swash', 'tin', 'puff', 'twister', 'random')
    },
    overlay:            'always',         // How to show overlay ('always', 'hover', 'none')
    controls: {
        show:           true,             // Shows the player controls (prev/pause/play/next)
        keys:           false             // Able to control by using the keyboard shortcuts (left/space/right)
    },
    events: {
        onThumbClick:   null,             // On thumb click
        onImageShow:    null,             // On image show
        onImageShown:   null,             // On image shown
        onImageHide:    null,             // On image hide
        onImageHidden:  null,             // On image hidden
        onImageClick:   null,             // On image click
        onPrev:         null,             // On previous
        onPause:        null,             // On pause
        onPlay:         null,             // On play
        onNext:         null,             // On next
        onError:        null,             // On error
        onWarning:      null,             // On warning
        onSuccess:      null              // On success
    }
}

Effets

J’utilisais la librairie à ne plus présenter, Animate.css. Maintenant je supporte également Magic. Cela se traduit dans le code par des fournisseurs d’effets. Selon l’effet que vous souhaitez pour vos transitions, inclure l’un ou l’autre CSS.

Evénements

Beaucoup d’événements ont été ajoutés afin de connaître la plupart des états du slideshow.

Méthodes publiques

Tout nouveau, tout beau.

Un $('#slideshow').desoSlide('rebuild'); réinitialisera votre slideshow.
Un $('#slideshow').desoSlide('goNext'); avancera d’une slide.
Et bien d’autres. A découvrir !

Tests

J’utilise toujours QUnit pour les tests. J’ai cependant ajouté à mon Gulp gulp-qunit afin de pouvoir les exécuter aussi en CLI. Ce qui me permet d’utiliser une plateforme d’intégration continue, Travis-CI (pour ceux qui ne connaissent pas, voir mon article), incontournable pour GitHub. Vous verrez alors le statut du dernier build sur le repo.

A vous !

Je n’ai pas tout dit dans l’article concernant les changements, la documentation est exhaustive, vous y trouverez les informations dont vous avez besoin.

Première demo

Première demo

N’hésitez pas à tester, à partager mon projet si vous le trouvez intéressant, ou tout simplement si vous appréciez mon travail. Dans l’idéal, j’aimerais que desoSlide soit davantage utilisé afin qu’il gagne en qualité. Et pour cela il doit circuler sur les réseaux sociaux. ;)

Merci !

Vous aimerez aussi...