Hover sur Slideshow avec jmpress.js

Le SlideshowJmpress récupéré sur le site http://tympanus.net est franchement sympa avec ces anims 3D, et les anims supplémentaires en CSS3, c'est du bel ouvrage!

Mais il ne s'arrête pas au hover. C'est pourtant très pratique: si la personne veut prendre le temps de regarder plus attentivement une slide, elle passe naturellement la souris dessus, et l'anim doit s'arrêter. Et reprendre quand la souris repart.

Classique, mais inexistant de base dans SlideshowJmpress . Voici donc la solution:

ouvrez le fichier js/jquery.jmslideshow.js


Ajoutez la propriété hoverpause dans votre déclaration d'objet comme suit:

$.JMSlideshow.defaults         = {
        // options for the jmpress plugin.
        // you can add much more options here. 
        jmpressOpts    : {
            // set the viewport
            viewPort         : {
                height    : 400,
                width    : 1000,
                maxScale: 1
            },
            fullscreen        : false,
            hash            : { use : false },
            mouse            : { clickSelects : false },
            keyboard        : { use : false },
            animation        : { transitionDuration : '1s' }
        },
        // for this specific plugin we will have the following options:
        // shows/hides navigation arrows
        arrows        : true,
        // shows/hides navigation dots/pages
        dots        : true,
        // each step's bgcolor transition speed
        bgColorSpeed: '1s',
        // slideshow on / off
        autoplay    : false,
        // time between transitions for the slideshow
        interval    : 3500,
        //pause on hover
        hoverpause : true
    };

et sous les lignes:

_loadEvents            : function() {
            
            var _self = this;

ajoutez les lignes suivantes:

// ADD THIS EDIT FOR PAUSE ON HOVER
            if(this.options.hoverpause && this.options.autoplay){
                
                _self.$jmsWrapper.on('mouseenter', function(e){
                    _self._stopSlideshow();
                    return false;
                } );

                _self.$jmsWrapper.on('mouseleave', function(e){
                    _self.options.autoplay   = true;
                    _self._startSlideshow();
                    return false;
                } );
            }
            // STOP EDIT

et voilà le travail! votre slider pause dès que l'on passe la souris dessus.

Pour rappel, jQuery est une bibliothèque JavaScript très populaire qui simplifie l'interaction avec les documents HTML, les événements, les animations et les requêtes AJAX. Elle est conçue pour être facile à utiliser et compatible avec tous les navigateurs modernes.

jQuery est livré avec une variété de fonctions qui peuvent être utilisées pour effectuer des tâches courantes en JavaScript, telles que la sélection d'éléments HTML, l'ajout ou la suppression d'éléments, la modification de styles et de classes, la gestion d'événements, l'animation de page et la récupération de données à partir de sources externes.

Grâce à sa popularité et à son support, jQuery est souvent utilisé pour simplifier le développement Web et pour rendre les sites Web interactifs plus rapidement et plus facilement.