Having trouble with Cycle plugin and activeSlide class

Having trouble with Cycle plugin and activeSlide class

I'm attempting to use the activeSlide class in the Cycle plugin, but I can't seem to get it to work properly using existing markup for the pager.

This is the code that I started with, and it works just fine (thanks to pritaeas.net):
  2. <style type="text/css"> 
  3. #nav { margin: 5px; }
  4. #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
  5. #nav a.activeSlide { background: #f00; }
  6. #nav a:focus { outline: none; }
  7. </style> 
  8. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  9. <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
  10. <script type="text/javascript" src="js/cufon-yui.js"></script>
  11. <script type="text/javascript" src="font/MTRCT_400.font.js"></script>

  13. <script type="text/javascript">
  14. Cufon.replace('#nav a', { fontFamily: 'MTRCT' ,hover: true});
  15. </script>

  17. <script type="text/javascript"> 
  18. $(function() {
  19. $('#slideshow').cycle({
  20. speed:       200,
  21. timeout:     0,
  22. pager:      '#nav',
  23. prev: '#prev',
  24. next: '#next',
  25. });
  26. });
  27. </script> 
  28. </head> 
  29. <body> 
  30. <div id="main"> 
  31. <div class="testWrapper">
  32. <div id="nav"></div>
  33. </div> 
  34. <div id="slideshow" class="pics"> 
  35. <img src="images/art_001.jpg" /> 
  36. <img src="images/art_002.jpg" /> 
  37. <img src="images/art_003.jpg" /> 
  38. </div> 
  39. </div>
But, the changes that I've made below that accommodate the page I'm designing break the activeSlide, even though the pager and previous/next function perfectly:

  2. <style type="text/css"> 
  3. #nav { margin: 5px; }
  4. #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
  5. #nav a.activeSlide { background: #f00; }
  6. #nav a:focus { outline: none; }
  7. </style> 
  8. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  9. <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
  10. <script type="text/javascript" src="js/cufon-yui.js"></script>
  11. <script type="text/javascript" src="font/MTRCT_400.font.js"></script>

  13. <script type="text/javascript">
  14. Cufon.replace('#nav a', { fontFamily: 'MTRCT' ,hover: true});
  15. </script>

  17. <script type="text/javascript"> 
  18. $(function() {
  19. $('#slideshow').cycle({
  20. speed:       200,
  21. timeout:     0,
  22. pager:      '#nav',
  23. prev: '#prev',
  24. next: '#next',
  25. pagerAnchorBuilder: function(idx, slide) { 
  26. return '#nav li:eq(' + (idx+1) + ') a';
  27. }
  28. });
  29. });
  30. </script> 
  31. </head> 
  32. <body> 
  33. <div id="main"> 
  34. <div class="testWrapper">
  35. <div id="nav">
  36. <ul>
  37. <li><a href="" id="prev">Prev</a></li>
  38. <li><a href="">1</a></li>
  39. <li><a href="">2</a></li>
  40. <li><a href="">3</a></li>
  41. <li><a href="" id="next">Next</a></li>
  42. </ul>
  43. </div>
  44. </div> 
  45. <div id="slideshow" class="pics"> 
  46. <img src="images/art_001.jpg" /> 
  47. <img src="images/art_002.jpg" /> 
  48. <img src="images/art_003.jpg" /> 
  49. </div> 
  50. </div>
I would really appreciate any help. Thanks!