title: How to stop and play jquery script
body: <p>I'm using <a href="http://www.slidesjs.com/" rel="nofollow">slidesjs</a> to create 5 different slideshows/galleries on a single-page site. They all have the class '.slides' and have their own ID.</p>
  
  <p>I do not want any of the slideshows to play until a play function is called. I've been able to successfully prevent each slideshow from playing onload using the following:</p>
  
  <pre><code>    function initiateSlides() {
      $('.slides').slides({
          generateNextPrev: true,
          fadeSpeed: 800,
          hoverPause: true,
          play: 3000,
          pause: 2500,
          preloadImage: 'images/loading.gif',
          effect: 'fade'
      });
      clearInterval($('#projects-commercial-slides').data('interval'));
      clearInterval($('#projects-residential-slides').data('interval'));
      clearInterval($('#projects-hospitality-slides').data('interval'));
      clearInterval($('#projects-public-slides').data('interval'));
      clearInterval($('#projects-industrial-slides').data('interval'));
  }
  </code></pre>
  
  <p>(Using class '.slides' does not stop the slideshows, hence using IDs.) However, I'm now unable to play any of the slideshows.  I've tried the following:</p>
  
  <pre><code>function playSlides() {
      $('#projects-residential-slides').animate();
  }
  
  function playSlides() {
      $('#projects-residential-slides').play();
  }
  
  function playSlides() {
      $('#projects-residential-slides').animate({
          animationStart:0
          });
  }
  
  function playSlides() {
      $('#projects-residential-slides').animate('next',fade);
  }
  </code></pre>
  
  <p>Your suggestions would be gratefully received as I've been working on this for days now(!). I appreciate I may not be preventing the slideshows from playing in the most elegant way. The full slides.jquery.js is here:</p>
  
  <pre><code>    /*
  * Slides, A Slideshow Plugin for jQuery
  * Intructions: http://slidesjs.com
  * By: Nathan Searles, http://nathansearles.com
  * Version: 1.1.8
  * Updated: June 1st, 2011
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
  (function($){
      $.fn.slides = function( option ) {
          // override defaults with specified option
          option = $.extend( {}, $.fn.slides.option, option );
  
          return this.each(function(){
              // wrap slides in control container, make sure slides are block level
              $('.' + option.container, $(this)).children().wrapAll('&lt;div class="slides_control"/&gt;');
  
              var elem = $(this),
                  control = $('.slides_control',elem),
                  total = control.children().size(),
                  width = control.children().outerWidth(),
                  height = control.children().outerHeight(),
                  start = option.start - 1,
                  effect = option.effect.indexOf(',') &lt; 0 ? option.effect : option.effect.replace(' ', '').split(',')[0],
                  paginationEffect = option.effect.indexOf(',') &lt; 0 ? effect : option.effect.replace(' ', '').split(',')[1],
                  next = 0, prev = 0, number = 0, current = 0, loaded, active, clicked, position, direction, imageParent, pauseTimeout, playInterval;
  
              // animate slides
              function animate(direction, effect, clicked) {
                  if (!active &amp;&amp; loaded) {
                      active = true;
                      // start of animation
                      option.animationStart(current + 1);
                      switch(direction) {
                          case 'next':
                              // change current slide to previous
                              prev = current;
                              // get next from current + 1
                              next = current + 1;
                              // if last slide, set next to first slide
                              next = total === next ? 0 : next;
                              // set position of next slide to right of previous
                              position = width*2;
                              // distance to slide based on width of slides
                              direction = -width*2;
                              // store new current slide
                              current = next;
                          break;
                          case 'prev':
                              // change current slide to previous
                              prev = current;
                              // get next from current - 1
                              next = current - 1;
                              // if first slide, set next to last slide
                              next = next === -1 ? total-1 : next;                                
                              // set position of next slide to left of previous
                              position = 0;                               
                              // distance to slide based on width of slides
                              direction = 0;      
                              // store new current slide
                              current = next;
                          break;
                          case 'pagination':
                              // get next from pagination item clicked, convert to number
                              next = parseInt(clicked,10);
                              // get previous from pagination item with class of current
                              prev = $('.' + option.paginationClass + ' li.'+ option.currentClass +' a', elem).attr('href').match('[^#/]+$');
                              // if next is greater then previous set position of next slide to right of previous
                              if (next &gt; prev) {
                                  position = width*2;
                                  direction = -width*2;
                              } else {
                              // if next is less then previous set position of next slide to left of previous
                                  position = 0;
                                  direction = 0;
                              }
                              // store new current slide
                              current = next;
                          break;
                      }
  
                      // fade animation
                      if (effect === 'fade') {
                          // fade animation with crossfade
                          if (option.crossfade) {
                              // put hidden next above current
                              control.children(':eq('+ next +')', elem).css({
                                  zIndex: 10
                              // fade in next
                              }).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
                                  if (option.autoHeight) {
                                      // animate container to height of next
                                      control.animate({
                                          height: control.children(':eq('+ next +')', elem).outerHeight()
                                      }, option.autoHeightSpeed, function(){
                                          // hide previous
                                          control.children(':eq('+ prev +')', elem).css({
                                              display: 'none',
                                              zIndex: 0
                                          });                             
                                          // reset z index
                                          control.children(':eq('+ next +')', elem).css({
                                              zIndex: 0
                                          });                                 
                                          // end of animation
                                          option.animationComplete(next + 1);
                                          active = false;
                                      });
                                  } else {
                                      // hide previous
                                      control.children(':eq('+ prev +')', elem).css({
                                          display: 'none',
                                          zIndex: 0
                                      });                                 
                                      // reset zindex
                                      control.children(':eq('+ next +')', elem).css({
                                          zIndex: 0
                                      });                                 
                                      // end of animation
                                      option.animationComplete(next + 1);
                                      active = false;
                                  }
                              });
                          } else {
                              // fade animation with no crossfade
                              control.children(':eq('+ prev +')', elem).fadeOut(option.fadeSpeed,  option.fadeEasing, function(){
                                  // animate to new height
                                  if (option.autoHeight) {
                                      control.animate({
                                          // animate container to height of next
                                          height: control.children(':eq('+ next +')', elem).outerHeight()
                                      }, option.autoHeightSpeed,
                                      // fade in next slide
                                      function(){
                                          control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing);
                                      });
                                  } else {
                                  // if fixed height
                                      control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
                                          // fix font rendering in ie, lame
                                          if($.browser.msie) {
                                              $(this).get(0).style.removeAttribute('filter');
                                          }
                                      });
                                  }                                   
                                  // end of animation
                                  option.animationComplete(next + 1);
                                  active = false;
                              });
                          }
                      // slide animation
                      } else {
                          // move next slide to right of previous
                          control.children(':eq('+ next +')').css({
                              left: position,
                              display: 'block'
                          });
                          // animate to new height
                          if (option.autoHeight) {
                              control.animate({
                                  left: direction,
                                  height: control.children(':eq('+ next +')').outerHeight()
                              },option.slideSpeed, option.slideEasing, function(){
                                  control.css({
                                      left: -width
                                  });
                                  control.children(':eq('+ next +')').css({
                                      left: width,
                                      zIndex: 5
                                  });
                                  // reset previous slide
                                  control.children(':eq('+ prev +')').css({
                                      left: width,
                                      display: 'none',
                                      zIndex: 0
                                  });
                                  // end of animation
                                  option.animationComplete(next + 1);
                                  active = false;
                              });
                              // if fixed height
                              } else {
                                  // animate control
                                  control.animate({
                                      left: direction
                                  },option.slideSpeed, option.slideEasing, function(){
                                      // after animation reset control position
                                      control.css({
                                          left: -width
                                      });
                                      // reset and show next
                                      control.children(':eq('+ next +')').css({
                                          left: width,
                                          zIndex: 5
                                      });
                                      // reset previous slide
                                      control.children(':eq('+ prev +')').css({
                                          left: width,
                                          display: 'none',
                                          zIndex: 0
                                      });
                                      // end of animation
                                      option.animationComplete(next + 1);
                                      active = false;
                                  });
                              }
                          }
                      // set current state for pagination
                      if (option.pagination) {
                          // remove current class from all
                          $('.'+ option.paginationClass +' li.' + option.currentClass, elem).removeClass(option.currentClass);
                          // add current class to next
                          $('.' + option.paginationClass + ' li:eq('+ next +')', elem).addClass(option.currentClass);
                      }
                  }
              } // end animate function
  
              function stop() {
                  // clear interval from stored id
                  clearInterval(elem.data('interval'));
              }
  
              function pause() {
                  if (option.pause) {
                      // clear timeout and interval
                      clearTimeout(elem.data('pause'));
                      clearInterval(elem.data('interval'));
                      // pause slide show for option.pause amount
                      pauseTimeout = setTimeout(function() {
                          // clear pause timeout
                          clearTimeout(elem.data('pause'));
                          // start play interval after pause
                          playInterval = setInterval( function(){
                              animate("next", effect);
                          },option.play);
                          // store play interval
                          elem.data('interval',playInterval);
                      },option.pause);
                      // store pause interval
                      elem.data('pause',pauseTimeout);
                  } else {
                      // if no pause, just stop
                      stop();
                  }
              }
  
              // 2 or more slides required
              if (total &lt; 2) {
                  return;
              }
  
              // error corection for start slide
              if (start &lt; 0) {
                  start = 0;
              }
  
              if (start &gt; total) {
                  start = total - 1;
              }
  
              // change current based on start option number
              if (option.start) {
                  current = start;
              }
  
              // randomizes slide order
              if (option.randomize) {
                  control.randomize();
              }
  
              // make sure overflow is hidden, width is set
              $('.' + option.container, elem).css({
                  overflow: 'hidden',
                  // fix for ie
                  position: 'relative'
              });
  
              // set css for slides
              control.children().css({
                  position: 'absolute',
                  top: 0, 
                  left: control.children().outerWidth(),
                  zIndex: 0,
                  display: 'none'
               });
  
              // set css for control div
              control.css({
                  position: 'relative',
                  // size of control 3 x slide width
                  width: (width * 3),
                  // set height to slide height
                  height: height,
                  // center control to slide
                  left: -width
              });
  
              // show slides
              $('.' + option.container, elem).css({
                  display: 'block'
              });
  
              // if autoHeight true, get and set height of first slide
              if (option.autoHeight) {
                  control.children().css({
                      height: 'auto'
                  });
                  control.animate({
                      height: control.children(':eq('+ start +')').outerHeight()
                  },option.autoHeightSpeed);
              }
  
              // checks if image is loaded
              if (option.preload &amp;&amp; control.find('img:eq(' + start + ')').length) {
                  // adds preload image
                  $('.' + option.container, elem).css({
                      background: 'url(' + option.preloadImage + ') no-repeat 50% 50%'
                  });
  
                  // gets image src, with cache buster
                  var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
  
                  // check if the image has a parent
                  if ($('img', elem).parent().attr('class') != 'slides_control') {
                      // If image has parent, get tag name
                      imageParent = control.children(':eq(0)')[0].tagName.toLowerCase();
                  } else {
                      // Image doesn't have parent, use image tag name
                      imageParent = control.find('img:eq(' + start + ')');
                  }
  
                  // checks if image is loaded
                  control.find('img:eq(' + start + ')').attr('src', img).load(function() {
                      // once image is fully loaded, fade in
                      control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
                          $(this).css({
                              zIndex: 5
                          });
                          // removes preload image
                          $('.' + option.container, elem).css({
                              background: ''
                          });
                          // let the script know everything is loaded
                          loaded = true;
                          // call the loaded funciton
                          option.slidesLoaded();
                      });
                  });
              } else {
                  // if no preloader fade in start slide
                  control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
                      // let the script know everything is loaded
                      loaded = true;
                      // call the loaded funciton
                      option.slidesLoaded();
                  });
              }
  
              // click slide for next
              if (option.bigTarget) {
                  // set cursor to pointer
                  control.children().css({
                      cursor: 'pointer'
                  });
                  // click handler
                  control.children().click(function(){
                      // animate to next on slide click
                      animate('next', effect);
                      return false;
                  });                                 
              }
  
              // pause on mouseover
              if (option.hoverPause &amp;&amp; option.play) {
                  control.bind('mouseover',function(){
                      // on mouse over stop
                      stop();
                  });
                  control.bind('mouseleave',function(){
                      // on mouse leave start pause timeout
                      pause();
                  });
              }
  
              // generate next/prev buttons
              if (option.generateNextPrev) {
                  $('.' + option.container, elem).after('&lt;a href="#" class="'+ option.prev +'"&gt;Prev&lt;/a&gt;');
                  $('.' + option.prev, elem).after('&lt;a href="#" class="'+ option.next +'"&gt;Next&lt;/a&gt;');
              }
  
              // next button
              $('.' + option.next ,elem).click(function(e){
                  e.preventDefault();
                  if (option.play) {
                      pause();
                  }
                  animate('next', effect);
              });
  
              // previous button
              $('.' + option.prev, elem).click(function(e){
                  e.preventDefault();
                  if (option.play) {
                       pause();
                  }
                  animate('prev', effect);
              });
  
              // generate pagination
              if (option.generatePagination) {
                  // create unordered list
                  if (option.prependPagination) {
                      elem.prepend('&lt;ul class='+ option.paginationClass +'&gt;&lt;/ul&gt;');
                  } else {
                      elem.append('&lt;ul class='+ option.paginationClass +'&gt;&lt;/ul&gt;');
                  }
                  // for each slide create a list item and link
                  control.children().each(function(){
                      $('.' + option.paginationClass, elem).append('&lt;li&gt;&lt;a href="#'+ number +'"&gt;'+ (number+1) +'&lt;/a&gt;&lt;/li&gt;');
                      number++;
                  });
              } else {
                  // if pagination exists, add href w/ value of item number to links
                  $('.' + option.paginationClass + ' li a', elem).each(function(){
                      $(this).attr('href', '#' + number);
                      number++;
                  });
              }
  
              // add current class to start slide pagination
              $('.' + option.paginationClass + ' li:eq('+ start +')', elem).addClass(option.currentClass);
  
              // click handling 
              $('.' + option.paginationClass + ' li a', elem ).click(function(){
                  // pause slideshow
                  if (option.play) {
                       pause();
                  }
                  // get clicked, pass to animate function                    
                  clicked = $(this).attr('href').match('[^#/]+$');
                  // if current slide equals clicked, don't do anything
                  if (current != clicked) {
                      animate('pagination', paginationEffect, clicked);
                  }
                  return false;
              });
  
              // click handling 
              $('a.link', elem).click(function(){
                  // pause slideshow
                  if (option.play) {
                       pause();
                  }
                  // get clicked, pass to animate function                    
                  clicked = $(this).attr('href').match('[^#/]+$') - 1;
                  // if current slide equals clicked, don't do anything
                  if (current != clicked) {
                      animate('pagination', paginationEffect, clicked);
                  }
                  return false;
              });
  
              if (option.play) {
                  // set interval
                  playInterval = setInterval(function() {
                      animate('next', effect);
                  }, option.play);
                  // store interval id
                  elem.data('interval',playInterval);
              }
          });
      };
  
      // default options
      $.fn.slides.option = {
          preload: false, // boolean, Set true to preload images in an image based slideshow
          preloadImage: '/img/loading.gif', // string, Name and location of loading image for preloader. Default is "/img/loading.gif"
          container: 'slides_container', // string, Class name for slides container. Default is "slides_container"
          generateNextPrev: false, // boolean, Auto generate next/prev buttons
          next: 'next', // string, Class name for next button
          prev: 'prev', // string, Class name for previous button
          pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to
          generatePagination: true, // boolean, Auto generate pagination
          prependPagination: false, // boolean, prepend pagination
          paginationClass: 'pagination', // string, Class name for pagination
          currentClass: 'current', // string, Class name for current class
          fadeSpeed: 350, // number, Set the speed of the fading animation in milliseconds
          fadeEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
          slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds
          slideEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
          start: 1, // number, Set the speed of the sliding animation in milliseconds
          effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for both
          crossfade: false, // boolean, Crossfade images in a image based slideshow
          randomize: false, // boolean, Set to true to randomize slides
          play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds
          pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds
          hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it
          autoHeight: false, // boolean, Set to true to auto adjust height
          autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds
          bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click
          animationStart: function(){}, // Function called at the start of animation
          animationComplete: function(){}, // Function called at the completion of animation
          slidesLoaded: function() {} // Function is called when slides is fully loaded
      };
  
      // Randomize slide order on load
      $.fn.randomize = function(callback) {
          function randomizeOrder() { return(Math.round(Math.random())-0.5); }
              return($(this).each(function() {
              var $this = $(this);
              var $children = $this.children();
              var childCount = $children.length;
              if (childCount &gt; 1) {
                  $children.hide();
                  var indices = [];
                  for (i=0;i&lt;childCount;i++) { indices[indices.length] = i; }
                  indices = indices.sort(randomizeOrder);
                  $.each(indices,function(j,k) { 
                      var $child = $children.eq(k);
                      var $clone = $child.clone(true);
                      $clone.show().appendTo($this);
                      if (callback !== undefined) {
                          callback($child, $clone);
                      }
                  $child.remove();
              });
              }
          }));
      };
  })(jQuery);
  </code></pre>