打开叠加层时暂停Flexslider [英] Pause Flexslider when overlay is open

问题描述

我们目前正在开发一个利用Flexslider插件(最近由Woo Themes收购)的项目.我们在此页面上有多个弹出窗口，我们希望滑块在弹出窗口处于活动状态时暂停，并在弹出窗口关闭时恢复.暂停仅在第一回合"有效，而恢复滑块不起作用.以下是我们用于滑块的代码.我尝试用除结束"调用之外的所有可用调用来关闭开始"功能.

We are currently working on a project that utilizes the Flexslider plugin (recently acquired by Woo Themes). We have multiple pop ups on this page and we want the slider to pause when the pop ups are active and resume when the pop ups close. The pause only works the first go 'round and the resuming the slider does not work. Below is the code we are using for the slider. I have tried switching out the "start" function with all available calls except the "end" call.

$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 .

在此方面的任何帮助将不胜感激.

Any help on this would be greatly appreciated.

推荐答案

已编辑

我想我知道这里发生了什么.问题是您正在发生冲突的事件.

I think I figured out what's going on here. The problem is you have conflicting events going on.

1. Flexslider通过执行setInterval并将间隔ID存储在内部状态变量(slider.animatedSlides)中来启动动画.
2. 当您将鼠标悬停在幻灯片上时，Flexslider会暂停.通过使用clearInterval()清除动画间隔来完成此操作.
3. 您单击幻灯片中的roi链接，该链接通过清除现在不存在的间隔而再次暂停.
4. 该页面上有一个叠加层，这意味着您在Flexslider上执行了mouseleave，因此它将使用setInterval()重新启动动画并存储间隔ID.
5. 您可以通过单击关闭按钮或叠加层来关闭叠加层，这时您调用resume()，它也会执行setInterval()，从而覆盖存储的间隔ID.因此，现在您要播放两个动画，因此速度提高了一倍. 加，下次调用pause()时，它只能清除您设置的最后一个间隔，因为它会覆盖存储的ID.因此，您将无法再清除第3步的间隔.因此，您将在一次间隔动画(慢)(mouseenter)和两次间隔动画(mouseleave)(快速)之间进行操作.

1. Flexslider starts the animation by doing setInterval and storing the interval ID in an internal state variable (slider.animatedSlides).
2. Flexslider pauses when you hover over the slide. It does this by clearing the animation interval with clearInterval().
3. You click the roi link in the slide, which pauses again, by clearing what is now a non-existant interval.
4. The page has an overlay on it, which means you do a mouseleave on the Flexslider, so it starts the animation up again with setInterval() and stores the interval ID.
5. You close the overlay, by clicking the close button or the overlay, at which point you call resume(), which also does a setInterval(), overwriting the stored interval ID. So, now you have two animations going, hence the double speed. Plus, next time you call pause(), it only has access to clear the last interval you set because it overwrote the stored ID. So, you can no longer clear the interval from step 3. So, you will be going between having a one interval animation going (slow), when you mouseenter and two when you mouseleave (fast).

您可以在#ovrly鼠标悬停时暂停，然后在单击时继续操作，因为Flexslider的鼠标退出将在叠加层的鼠标悬停之前.

Instead of pausing on the click, you could pause on #ovrly mouseover, and resume on click, because the mouseexit of the Flexslider would before the mouseover of the overlay.

$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:

But, you may run into similar problems, depending on whether the mouse is over the slider or not when the overlay is closed... but I'm not sure. Ideally, Flexslider wouldn't start a new animation if one was already going. You could hack this into 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:参数函数中重载这些函数.

You could overload these functions in your start: parameter function.

此更改将解决快速问题以及您无法再次暂停的事实.当您的叠加层弹出时，您仍然会遇到滑块恢复的问题.这可以通过我前面提到的mouseover解决方案来解决.

This change will solve the fast speed and the fact that you can't pause again. You will still have the problem of the slider resuming when your overlay pops up. This can be solved with the mouseover solution I mentioned before.

以下是显示mouseover解决方案的小提琴: http://jsfiddle.net/jtbowden/TWN5t /

Here is a fiddle that shows the mouseover solution: http://jsfiddle.net/jtbowden/TWN5t/

尽管它是更好的代码，但看起来好像您可能不需要第二次破解.

It looks as if you may not need the second hack, although it is better code.

这篇关于打开叠加层时暂停Flexslider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！