CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alloy
alloy

Reputation: 766

Stop Video Slideshow on Click

How do I make a simple slideshow script pause when someone clicks on the slideshow?

I have a slideshow of Youtube videos that cycle through with this script:

setInterval() { 
$('#videoSlides > div:first')
.fadeOut(0)
.next()
.fadeIn(2000)
.end()
.appendTo('#videoSlides');
},  15000);};

HTML as follows (container div, plus 3 child divs each containing an embedded youtube video):

<div id="videoSlides">
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe>
</div>
</div>

So, while the slideshow is flipping between the 3 videos, and someone clicks on one of the videos, that slideshow should stop there on that slide. How do I make this happen?

Upvotes: 0

Views: 298

Answers (3)

janwschaefer
janwschaefer

Reputation: 609

While the other answers are pointing in the right direction, you should be aware of another thing: Catching the click event from the embedded youtube players is not as easy as suggested because the click event is not propagated outside of the player.

A simple workaround is to use the mouseenter event instead, like so:

$('#videoSlides').mouseenter(function() {
    clearInterval(interval);
});

But that might not yield the behavior you want.

Another more complicated way to go is to use the youtube player api to catch the state change when the video starts. You can find more information in the docs.

I put together an example jsfiddle (don't forget to insert your video IDs in the HTML part first!)

Upvotes: 2

idrumgood
idrumgood

Reputation: 4924

I think what you're asking is how to stop your interval from running. To do so, when you set it, assign it to a variable. Then you can use clearInterval like so:

var mySlideShow = window.setInterval(function(){
    [Your transition code]
}, 15000);

//on click
window.clearInterval(mySlideShow);

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

here you go:

var interval=setInterval(function() { 
    $('#videoSlides > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#videoSlides');
}, 15000)};

$('#videoSlides').click(function(){
    clearInterval(interval);
});

Upvotes: 0

Related Questions