0

Example of the problem here: http://jsfiddle.net/EtWXX/

I have my infinite carousel set to auto play. It also has videos embedded. I need it to do two things however.

  1. Stop if a video is played.
  2. Stop if 'next' & 'prev' are interacted with.
xhadf
  • 57
  • 1
  • 7

1 Answers1

0

You just need to call clearInterval(intervalId) when things are interacted with, then set it up again with intervalId = window.setInterval(slide, 5000); when you want it to start sliding again. if you wanted it to pause on hover you'd do something like:

$('#viewport').hover(
     function(){clearInterval(intervalId);},
     function(){intervalId = window.setInterval(slide,5000);}
);

I don't know what the code would be to detect a vimeo video playing or not, but it's trivial to turn the scrolling on/off this way.

EDIT

For vimeo you should check out their API you have to add ?api=1 to the end of your vimeo URL in the iframe and load their library called froogaloop that you can use to do this:

        jQuery('iframe.vimeo').each(function(){
            $f(this).addEvent('play', function(){clearInterval(intervalId);});
            $f(this).addEvent('stop', function(){intervalId = window.setInterval(slide,5000);});
        });

that should stop the slideshow when you play the video, and restart it when the video stops, it's listening for events from the API

as for the prev & next, just add the clear interval right after jQuery(next).click(function(event) { and jQuery(prev).click(function(event) { in the plugin's code, I don't know how you'd want to resume the slideshow though, but we already know the code for that...

JKirchartz
  • 17,612
  • 7
  • 60
  • 88
  • Thanks JKirchartz. That has stopped it on hover. Do you know how to stop it once the next and prev buttons are used. – xhadf Mar 28 '12 at 08:01
  • I could also really do with finding out how to stop the carousel when a Vimeo video is played if anyone can help out. – xhadf Mar 28 '12 at 08:02
  • Thanks so much for your response. I already have the ?api=1 added in the url, for other reasons. I tried adding the Froogaloop script to no avail. Is there a specific place where I need to place it? Thanks. – xhadf Mar 28 '12 at 13:20
  • @xhadf not that I know of, it needs to be loaded before you can use it, so just anywhere before that should be fine... – JKirchartz Mar 28 '12 at 14:25
  • the jquery call there is looking for an `iframe` with the class `vimeo` (hence `iframe.vimeo`) change that to an appropriate selector for your videos, or add `class="vimeo"` to the vimeo iframes. – JKirchartz Mar 28 '12 at 14:59
  • Ah yes of course. I have applied the class to the iframe, but it still is not having it... http://jsfiddle.net/EtWXX/4/ – xhadf Mar 28 '12 at 15:07
  • I also attached the froogaloop js file, and still nothing! – xhadf Mar 29 '12 at 20:50
  • @xhadf try the `$f` shortcut instead of `Froogaloops` I've updated my code – JKirchartz Mar 29 '12 at 22:31
  • Ok, so I've tried the above suggestions, and also found that adding player_id in the video url is also required. As we are using a class, I assume that adding player_class=vimeo in the url would work, but still nothing! Updated Fiddle here: http://jsfiddle.net/EtWXX/5/ – xhadf Apr 03 '12 at 18:59
  • @xhadf each player needs a unique player_id so the API knows which one to target – JKirchartz Apr 03 '12 at 19:06
  • Yes, on my example there should only be one player in the carousel. – xhadf Apr 03 '12 at 19:54