Pausar o Flexslider quando a sobreposição estiver aberta

Question

Atualmente estamos trabalhando em um projeto que utiliza o plugin Flexslider (recentemente adquirido pela Woo Themes).Temos vários pop-ups nesta página e queremos que o controle deslizante faça uma pausa quando os pop-ups estiverem ativos e retome quando os pop-ups fecharem.A pausa só funciona na primeira tentativa e a retomada do controle deslizante não funciona.Abaixo está o código que estamos usando para o controle deslizante.Tentei desligar a função "iniciar" com todas as chamadas disponíveis, exceto a chamada "final".

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

        }
    });

O link para a página é http://www.whitehardt.com/sandbox/whitehardt-v3.

Qualquer ajuda neste assunto seria altamente apreciada.

Answer 1

Editado

Acho que descobri o que está acontecendo aqui.O problema é que você tem eventos conflitantes acontecendo.

1. Flexslider inicia a animação fazendo setInterval e armazenar o ID do intervalo em uma variável de estado interna (slider.animatedSlides).
2. O Flexslider faz uma pausa quando você passa o mouse sobre o slide.Isso é feito limpando o intervalo de animação com clearInterval().
3. Você clica no roi link no slide, que faz uma pausa novamente, limpando o que agora é um intervalo inexistente.
4. A página tem uma sobreposição, o que significa que você faz uma mouseleave no Flexslider, então ele inicia a animação novamente com setInterval() e armazena o ID do intervalo.
5. Você fecha a sobreposição clicando no botão Fechar ou na sobreposição, momento em que você chama resume(), que também faz uma setInterval(), substituindo o ID do intervalo armazenado.Então, agora você tem duas animações acontecendo, daí a velocidade dupla. Mais, próxima vez que você ligar pause(), ele só terá acesso para limpar o último intervalo definido porque substituiu o ID armazenado.Portanto, você não pode mais limpar o intervalo da etapa 3.Então, você estará entre ter uma animação de um intervalo (lenta), quando você mouseenter e dois quando você mouseleave (rápido).

Em vez de pausar no clique, você pode pausar #ovrly mouseover e retomar ao clicar, porque a saída do mouse do Flexslider ocorreria antes do mouseover da sobreposição.

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

Mas, você pode ter problemas semelhantes, dependendo se o mouse está sobre o controle deslizante ou não quando a sobreposição é fechada...mas eu não tenho certeza.Idealmente, o Flexslider não iniciaria uma nova animação se ela já estivesse em andamento.Você poderia hackear isso no 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);
  }
}

Você pode sobrecarregar essas funções em seu start: função de parâmetro.

Essa mudança resolverá a velocidade rápida e o fato de você não poder pausar novamente.Você ainda terá o problema de o controle deslizante ser retomado quando a sobreposição for exibida.Isso pode ser resolvido com o mouseover solução que mencionei antes.

Aqui está um violino que mostra o mouseover solução: http://jsfiddle.net/jtbowden/TWN5t/

Parece que você não precisa do segundo hack, embora seja um código melhor.

Answer 2

@Jeff B, obrigado pela correção do JS.Como não funciona com o branch 2.x do Flexslider, acho que é apenas para 1.x

Para aqueles no 2.x, uma correção foi enviada por nvartolomei:https://github.com/woothemes/FlexSlider/pull/322

Answer 3

Enfrentei o mesmo problema ao trabalhar com Brightcove+flexslider.aqui está minha solução alternativa:

antes

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

então

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-play opacidade css:0