Pause on Hover sur Slideshow with jmpress.js

slideshow-jmpress-3d
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. Check http://shama.github.com/jmpress.js/
        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.

 

Commentaires

Pas encore de commentaire
Already Registered? Login Here
Guest
jeudi 13 août 2020

Image Captcha

By accepting you will be accessing a service provided by a third-party external to https://www.pulsar-informatique.com/