Приостановите Flexslider, когда открыто наложение

StackOverflow https://stackoverflow.com//questions/9608844

  •  09-12-2019
  •  | 
  •  

Вопрос

В настоящее время мы работаем над проектом, в котором используется плагин Flexslider (недавно приобретенный Woo Themes).У нас есть несколько всплывающих окон на этой странице, и мы хотим, чтобы ползунок приостанавливался, когда всплывающие окна активны, и возобновлялся, когда всплывающие окна закрываются.Пауза работает только при первом запуске, а возобновление работы ползунка не работает.Ниже приведен код, который мы используем для слайдера.Я попробовал отключить функцию "start" со всеми доступными вызовами, кроме вызова "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');
            });

        }
    });

Ссылка на страницу находится здесь http://www.whitehardt.com/sandbox/whitehardt-v3.

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

Это было полезно?

Решение

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

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

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

Вместо того чтобы делать паузу при щелчке, вы могли бы сделать паузу при #ovrly наведите курсор мыши и возобновите работу по щелчку, потому что mouseexit 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/

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

Другие советы

@jeff b, спасибо за исправление JS.Поскольку это не работает с филиалом 2.x Flexslider, я думаю, что это только для 1.x

Для тех, кто на 2.x, исправление было отправлено nvartolomei: https://github.com/wothemes/flexslider/pull/322

Я столкнулся с той же проблемой, работающей с 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 непрозрачность: 0

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top