Flexslider pause on opening overlay

Question

We are currently working on a project that uses the Flexslider plugin (recently acquired by Woo Themes). We have several pop-ups on this page, and we want the slider to stop when the pop-ups are active and resume when the pop-ups close. A pause only works the first time, and resuming the slider does not work. Below is the code we use for the slider. I tried to disable 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');
             });

         }
     });

Link to http://www.whitehardt.com/sandbox/whitehardt-v3 .

Any help on this would be greatly appreciated.

Answer 1

Edited

I think I understand what is happening here. The problem is that you have conflicting events going on.

• Flexslider starts the animation by executing setInterval and storing the interval identifier in an internal state variable ( slider.animatedSlides ).
• Flexslider pauses when you hover over a slide. He does this by clearing the animation interval with clearInterval() .
• You click on the roi link on the slide, which pauses again, clearing what is now a non-existent interval.
• It has an overlay on it, which means that you are executing a mouseleave on Flexslider, so it starts the animation again using setInterval() and saves the interval identifier.
• You close the overlay by pressing the close or overlay button, after which you call resume() , which also executes setInterval() , overwriting the id of the saved interval. So, now you have two animations running , therefore, double speed. Plus, the next time pause() called, it only has access to clear the last interval that you set, because it overwrites the saved identifier. Thus, you can no longer clear the interval from step 3. Thus, you will be moved between one animation of the intervals (slow) when you are mouseenter and two when you are mouseleave (fast).

Instead of pausing a click, you can pause on #ovrly mouseover and resume clicking because the mouseexit from Flexslider will be before overlaying.

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

But , you may encounter similar problems, depending on whether the mouse is above the slider or not when the overlay is closed ... but I'm not sure. Ideally, Flexslider does not start a new animation if you are already going. You can hack this in 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); } } 

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

This change will solve the fast speed and the fact that you cannot pause again. You will still have a problem with the continuation of the slider when an overlay appears. This can be solved using the mouseover solution mentioned earlier.

Here is a fiddle showing a mouseover solution: http://jsfiddle.net/jtbowden/TWN5t/

It looks like you might not need a second hack, although this is the best code.

Answer 2

@Jeff B, thanks for fixing JS. Since it does not work with the 2.x Flexslider branch, I think it is just for 1.x

For those on 2.x, a fix was provided by nvartolomei: https://github.com/woothemes/FlexSlider/pull/322

Answer 3

I ran into the same issue as working with the + flexslider hotkey. here is my way:

before

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

then

 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