Pause Flexslider quand l'overlay est ouvert

Édité

Je pense que j'ai compris ce qu'il se passe ici. Le problème est que vous avez un conflit événements en cours.

1. Flexslider lance l'animation en faisant setInterval et le stockage de l'intervalle ID dans une variable d'état (slider.animatedSlides).
2. Flexslider se met en pause lorsque vous passez la souris sur la diapositive. Il le fait par la compensation de l'animation de l'intervalle avec clearInterval().
3. Vous cliquez sur le roi lien dans la diapositive, qui s'arrête de nouveau, en compensation de ce qui est aujourd'hui un non-existant intervalle.
4. La page a une superposition sur elle, ce qui signifie que vous faites une mouseleave sur le Flexslider, donc il commence à l'animation de nouveau avec setInterval() et stocke l'ID d'intervalle.
5. Vous fermez la superposition, en cliquant sur le bouton fermer ou de la superposition, à quel point vous appelez resume(), qui a également fait un setInterval(), l'écrasement de la stockées ID d'intervalle. Donc, maintenant, vous avez deux animations va, d'où le double de la vitesse. Plus, prochaine fois que vous appelez pause(), il n'a accès qu'à effacer le dernier intervalle défini, car il a remplacé le stockés ID. Donc, on ne peut plus claire de l'intervalle à partir de l'étape 3. Donc, vous allez entre le fait d'avoir un intervalle d'animation (lent), lorsque vous mouseenter et de deux quand vous mouseleave (rapide).

Au lieu de la suspension sur le clic, vous pouvez mettre en pause sur #ovrly passage de la souris, et de la reprendre sur un clic, parce que le mouseexit de la Flexslider serait avant le passage de la souris de la superposition.

$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();
        });
    }
});

Mais, vous risquez de rencontrer des problèmes similaires, en fonction de si la souris est sur le curseur ou pas lors de la superposition est fermé... mais je ne suis pas sûr. Idéalement, Flexslider refusait de démarrer une nouvelle animation si l'on était déjà en cours. Vous pourriez hack en 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);
  }
}

Vous pourriez surcharge de ces fonctions dans votre start: paramètre de la fonction.

Ce changement permettra de résoudre la vitesse et le fait que vous ne pouvez pas suspendre de nouveau. Vous aurez toujours le problème du curseur lors de la reprise de votre superposition de pop-up. Cela peut être résolu avec la mouseover solution je l'ai mentionné avant.

Ici est un violon qui montre la mouseover solution: http://jsfiddle.net/jtbowden/TWN5t/

Il semble que si vous ne pouvez pas besoin de deuxième hack, mais il est mieux de code.

OriginalL'auteur Jeff B

J'ai fait face à la même question travailler avec brightcove+flexslider.
voici ma solution:

avant

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

puis

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

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

.flex-pauseplay .flex-jeu css opacity: 0

OriginalL'auteur Guido Medugno