Приостановить Flexslider при открытом оверлее

Question

В настоящее время мы работаем над проектом, который использует плагин Flexslider (недавно приобретенный Woo Themes). У нас есть несколько всплывающих окон на этой странице, и мы хотим, чтобы ползунок приостанавливался, когда всплывающие окна были активными, и возобновлялся, когда закрывались. Пауза работает только во время первого обхода, а возобновление слайдера не работает. Ниже приведен код, который мы используем для слайдера. Я попытался отключить функцию «начало» со всеми доступными вызовами, кроме вызова «конец».

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

        }
    });

Ссылка на страницу: http://www.whitehardt.com/sandbox/whitehardt-v3.

Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

Отредактировано

Думаю, я поняла, что здесь происходит.Проблема в том, что происходят конфликтующие события.

1. Flexslider запускает анимацию, выполняя setInterval и сохраняя идентификатор интервала во внутренней переменной состояния (slider.animatedSlides).
2. Flexslider делает паузу, когда вы наводите курсор на слайд.Это достигается путем очистки интервала анимации с помощью clearInterval().
3. . Вы нажимаете ссылку roi на слайде, которая снова приостанавливается, путем очистки того, что сейчас является несуществующим интервалом.
4. На странице есть наложение, что означает, что вы делаете mouseleave на Flexslider, поэтому она запускает анимацию снова с setInterval() и сохраняет идентификатор интервала.
5. Вы закрываете наложение,нажав кнопку закрытия или наложение, после чего вы наберете resume(), что также делает setInterval(), перезаписывая сохраненный идентификатор интервала.Итак, теперь у вас есть две анимации, идущие , следовательно, удвоенная скорость. Плюс, при следующем вызове pause() у него есть доступ только для очистки последнего установленного интервала, поскольку он перезаписал сохраненный идентификатор.Таким образом, вы больше не можете очищать интервал с шага 3. Итак, вы будете идти между анимацией с одним интервалом (медленно), когда вы mouseenter, и двумя, когда вы mouseleave (быстро).

Вместо того, чтобы делать паузу при щелчке, вы можете сделать паузу при #ovrly наведении мыши и возобновить при щелчке, потому что выход мыши из Flexslider будет до наведения мыши при наложении.

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

Но , вы можете столкнуться с подобными проблемами, в зависимости от того, находится ли мышь над ползунком или нет, когда наложение закрыто ... но я не уверен.В идеале, Flexslider не должен запускать новую анимацию, если она уже началась.Вы можете взломать это в 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);
  }
}

Вы можете перегрузить эти функции в функции параметра start:.

Это изменение решит быструю скорость и тот факт, что вы можетене пауза сноваУ вас все еще будет проблема с возобновлением работы слайдера, когда всплывающее окно появится.Это можно решить с помощью решения mouseover, о котором я упоминал ранее.

Вот скрипка, показывающая решение mouseover: http://jsfiddle.net/jtbowden/TWN5t/

Похоже, что вам может не понадобитьсявторой взлом, хотя это лучший код.

Answer 2

@ Джефф Б, спасибо за исправление JS. Так как он не работает с веткой 2.x Flexslider, я думаю, что это только для 1.x

Для пользователей 2.x исправление было представлено nvartolomei: https://github.com/woothemes/FlexSlider/pull/322

Answer 3

Я столкнулся с той же проблемой при работе с brightcove + flexslider. вот мой обходной путь:

до

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

тогда

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 css opacity: 0