title: Jquery cycle slideshow navigation autoplay - want animate to fire without any click event
body: <p>I have a Jquery Cycle slideshow that has a click function to animate a pager navigation. this works if the slideshow is manual. I now want the slideshow to run automatically and the pager navigation to animate with the change of the slideshow image. This is the code that works with a manual click but now that i have set the slideshow to run automatically this code wont get actioned. What do i need to change to get the event to occur</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          //&lt;![CDATA]
          $(function(){
             //  nav animation2  
          $('#nav_move').css({
          width: 16,
          height: 16
          });
  
          $('#navi a').click(function() {
          var offset = $(this).offset();
          var offsetbody= $('#nav').offset();
          //find the offset of the wrapping div    
          $('#nav_move').animate({
              width: $(this).width()+7,
              height: 16,
              left: (offset.left-offsetbody.left-1.2)
          });
          return false;
          });        
      });
          //]]&gt;
          &lt;/script&gt;
  </code></pre>
  
  <p>This is the code for the page</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
      &lt;meta name="author" content="Michael Horsfall" /&gt;
  
      &lt;title&gt;Client Slideshow&lt;/title&gt;
  
      &lt;script src="modules/mod_clients_slideshow/js/jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="modules/mod_clients_slideshow/js/jquery.cycle.all.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="modules/mod_clients_slideshow/js/preloadCssImages.jQuery_v5.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
      $.preloadCssImages();
      });
      &lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
          $('#myslides').cycle({
              fx: '&lt;?php echo $effectFx; ?&gt;',
              speed: &lt;?php echo $speed; ?&gt;,
              timeout: 1000,
              nowrap: 0,
              fit: 1,
              pause: 2,
              pager: '#navi'
          });
          $('#nav .next a').click(function(){
          var nextClick = $('#navi a.activeSlide').next('a');
          $(nextClick).click();
          return false;
          })
          // back arrow
          $('#nav .prev a').click(function(){
          var prevClick = $('#navi a.activeSlide').prev('a');
          $(prevClick).click();
          return false;
          })
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      //&lt;![CDATA]
      $(function(){
         //  nav animation2  
      $('#nav_move').css({
      width: 16,
      height: 16
      });
  
      $('#navi a').click(function() {
      var offset = $(this).offset();
      var offsetbody= $('#nav').offset();
      //find the offset of the wrapping div    
      $('#nav_move').animate({
          width: $(this).width()+7,
          height: 16,
          left: (offset.left-offsetbody.left-1.2)
      });
      return false;
      });        
  });
      //]]&gt;
      &lt;/script&gt;
  
      &lt;link rel="stylesheet" href="modules/mod_clients_slideshow/css/style.css" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;h1&gt;
  &lt;?php
  
  try {       
      // Styling for images   
      echo "&lt;div id=\"myslides\"&gt;";
  
      $files = new DirectoryIterator($imageFolder);
      $i=0;
      $files_array = array();
      foreach ($files as $fileinfo){
          if ($fileinfo-&gt;isFile()){
          $files_array[$i++]=$fileinfo-&gt;getFileName();
          }
      }
      asort($files_array);
      foreach ( $files_array as $file ) {         
              $path = $imageFolder . "/" . $file;
              $fileBaseName=basename($path,".jpg");
              $trimmed=substr($fileBaseName,2);
              echo "&lt;img src=\"" . $path . "\" alt=\"" . $trimmed . "\" /&gt;";  
          }
      echo "&lt;/div&gt;";
  }   
  catch(Exception $e) {
      echo 'No images found for this slideshow.&lt;br /&gt;';   
  }
  ?&gt;
  &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="nav" class="nav"&gt;
  
  &lt;span id="nav_move"&gt;&lt;/span&gt;
  &lt;div id="navi" class="navi"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>