Pausa FlexSlider quando la sovrapposizione è aperta

Question

Attualmente stiamo lavorando su un progetto che utilizza il plugin Flexslider (acquisito recentemente da temi WOO).Abbiamo più pop-up su questa pagina e vogliamo che il cursore si fermi quando i pop-up sono attivi e riprendono quando si chiudono i pop-up.La pausa funziona solo il primo giro e il recupero del cursore non funziona.Di seguito è riportato il codice che stiamo usando per il cursore.Ho provato a disinnestare la funzione "Start" con tutte le chiamate disponibili ad eccezione della chiamata "End".

$w('#slider-frame').flexslider({
        animation: 'fade',
        directionNav: false,
        slideshowSpeed: 4000,
        controlNav: true,
        pauseOnHover: true,
        manualControls: '#indicator-dots li',
        start: function(slider){

            $w('.roi-click').click(function(){
                slider.trigger('mouseenter');
            });

            $w('div#ovrly, a#close').click(function(){
                slider.trigger('mouseleave');
            });

        }
    });

.

Il collegamento alla pagina è http://www.whitehardt.com/sandbox/whitehardt-v3 .

Qualsiasi aiuto su questo sarebbe molto apprezzato.

Answer 1

modificato

Penso di aver capito cosa sta succedendo qui. Il problema è che hai eventi in conflitto in corso.

.
1. Flexslider avvia l'animazione eseguendo setInterval e memorizzando l'ID intervallo in una variabile di stato interna (slider.animatedSlides).
2. Flexslider si interrompe quando si aggira sopra la diapositiva. Lo fa cancellando l'intervallo di animazione con clearInterval().
3. Si fa clic sul collegamento roi nella diapositiva, che si interrompe nuovamente, cancellando ciò che ora è un intervallo inesistente.
4. La pagina ha una sovrapposizione su di esso, il che significa che si esegue un mouseleave sul flexslider, quindi avvia nuovamente l'animazione con setInterval() e memorizza l'ID intervallo.
5. Chiudi la sovrapposizione, facendo clic sul pulsante Chiudi o sulla sovrapposizione, in quale punto si chiama resume(), che fa anche un setInterval(), sovrascrivendo l'ID intervallo memorizzato. Quindi, Ora hai due animazioni in corso , quindi la doppia velocità. Plus, La prossima volta che si chiama pause(), ha solo accesso per cancellare l'ultimo intervallo impostato perché ha sovrascritto l'ID memorizzato. Quindi, non è più possibile cancellare l'intervallo dal punto 3. Quindi, andrai tra avere un'animazione di un'unicazione di intervallo (lenta), quando mouseenter e due quando sei generatoDICETAGCODE (veloce).

   Invece di mettere in pausa sul clic, è possibile mettere in pausa il mouse del mouse mouseleave e riprendere il clic, poiché la mouseeexit del flexslider avrebbe prima del mouseover della sovrapposizione.

   $w('#slider-frame').flexslider({
       animation: 'fade',
       directionNav: false,
       slideshowSpeed: 4000,
       controlNav: true,
       pauseOnHover: true,
       manualControls: '#indicator-dots li',
       start: function(slider){
           $w('div#ovrly').mouseover(function(){
               slider.pause();
           });
           $w('div#ovrly, a#close').click(function() {
               slider.resume();
           });
       }
   });
   

   .

   Ma , puoi inserire problemi simili, a seconda che il mouse sia sopra il cursore o meno quando la sovrapposizione è chiusa ... ma non ne sono sicuro. Idealmente, Flexslider non avrebbe iniziato una nuova animazione se uno stava già andando. Potresti hacker questo in flexslider.js:

   //FlexSlider: Automatic Slideshow Pause
   slider.pause = function() {
     // Only pause if running
     if(slider.animatedSlides == null) {
         return;
     }
   
     clearInterval(slider.animatedSlides);
   
     // Clear the interval ID
     slider.animatedSlides = null;
   
     if (slider.vars.pausePlay) {
       slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
     }
   }
   
   //FlexSlider: Automatic Slideshow Start/Resume
   slider.resume = function() {
     // Only resume if paused
     if(slider.animatedSlides != null) {
         return;
     }
     slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
     if (slider.vars.pausePlay) {
       slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
     }
   }
   

   .

   È possibile sovraccaricare queste funzioni nella funzione parametro #ovrly.

   Questo cambiamento risolverà la velocità veloce e il fatto che non si può mettere in pausa. Avrai ancora il problema del cursore che riprende quando la sovrapposizione si apre. Questo può essere risolto con la soluzione start: che ho menzionato prima.

   Ecco un violino che mostra la soluzione mouseover: http://jsfiddle.net/jtbowden/twn5t/ < / a>

   Sembra che tu possa non aver bisogno del secondo hack, anche se è un codice migliore.

Answer 2

@Jeff B, grazie per la correzione JS.Dal momento che non funziona con il ramo 2.x di Flexslider, penso che sia solo per 1.x

Per quelli su 2.x, una soluzione è stata presentata da nvartolomei: https://github.com/wothememes/flexslider/pull/322

Answer 3

Ho affrontato lo stesso problema che lavora con BrightCove + Flexslider. Ecco la mia soluzione alternativa:

Prima

        pausePlay: true,
        pauseText :"Pause",
        playText  :"Play"

.

quindi

video.addEventListener(BCMediaEvent.PLAY, function () {
    $('.flex-pauseplay .flex-pause').trigger('click');
});

video.addEventListener(BCMediaEvent.STOP, function () {
    $('.flex-pauseplay .flex-play').trigger('click');   
});

.

.flex-pauseplayplay .flex-play css opacità: 0