CODEWITHSUNDEEP
jqueryslideshow
bdchase
bdchase

Reputation: 29

Play/Pause toggle button jquery slideshow

I created a slideshow, but I am having trouble adding a Pause/Play toggle button. Any idea what I'm doing wrong? The button isn't toggling correctly or pausing the slideshow.

Here is my jsfiddle: http://jsfiddle.net/L7yKp/103/

This is the part I'm having trouble with: 

  $('#stop').click( function() {
         stop();
         showPlay();
         } );

  $('#play').click( function() {
         start();
         showPause();
         } );

   function showPause() {
      $('#play').hide();
      $('#stop').show();
       }

    function showPlay() {
       $('#stop').hide();
       $('#play').show();
       }

Upvotes: 2

Views: 4367

Answers (1)

Trevor
Trevor

Reputation: 16116

Here is one example using a variable stop.

http://jsfiddle.net/L7yKp/104/

Initialize stop variable

var stop = false;

If the stop button is clicked then set stop to true.

$('#stop').click( function() {
    stop = true;
    //stop();
    showPlay();
} );

If the play button is clicked then set stop to false and call runSlideShow() to start the slide show.

 $('#play').click( function() {
    stop = false;
    runSlideShow();
    showPause();
 } );

In your slideShow function if stop is true then return false which stops the function from running. Thus stopping your slide show.

var slideShow = function(){
    if(stop)
        return false;
    ....
}

Instead of running your slideshow from the moment the page loads I called showPlay() so that the pause button would be hidden and the slideshow wouldn't start until clicked.

showPlay();
//runSlideShow();

Hopefully this example will get you started and give you an idea. It's just one of many ways you could do it.

Upvotes: 1

Related Questions