jQuery Cycle Plugin, add class to current slide thumbnail/link

Question

I'm currently using this jQuery Cycle Plugin: http://jquery.malsup.com/cycle/

And I have the following code:

<script type="text/javascript">
// Slideshow cycle init
$(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',
      speed: 500
    });
});
function setSlide(index) {
     $('#slideshow').cycle(index);
}

// current link
 $(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });
</script>

<div id="slideshow" class="products-slideshow">
  <img src="product-slides/1.jpg" />
  <img src="product-slides/2.jpg" />
  <img src="product-slides/3.jpg" />
  <img src="product-slides/4.jpg" />
  <img src="product-slides/5.jpg" />
</div>

<ul class="products-slideshow-thumbs">
  <li><a onclick="setSlide(0);"><img src="product-slides/thumbs/1.jpg" /></a></li>
  <li><a onclick="setSlide(1);"><img src="product-slides/thumbs/2.jpg" /></a></li>
  <li><a onclick="setSlide(2);"><img src="product-slides/thumbs/3.jpg" /></a></li>
  <li><a onclick="setSlide(3);"><img src="product-slides/thumbs/4.jpg" /></a></li>
  <li><a onclick="setSlide(4);"><img src="product-slides/thumbs/5.jpg" /></a></li>
</ul>

Right now, it works as it should slideshow-wise and style-wise. However, I'm trying to add a class to the currently-shown thumbnail link (wrapped in the 'products-slideshow-thumbs' class) using jQuery.
The jQuery I have in the code above adds the class when I click on the thumbnail link, but when I click on another thumbnail link, BOTH thumbnail links retain the "current" class. Is there a way to make sure only ONE link (the current link) keeps the "current" class?

Any suggestions would be much appreciated! Thank you for reading.

could you possibly show a jsfiddle.net – naveen Apr 05 '11 at 15:51 — naveen, Apr 05 '11 at 15:51

score 2 · Accepted Answer · answered Apr 05 '11 at 15:50

Change this:

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });

into this:

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $('ul.products-slideshow-thumbs li a').removeClass("current");
      $(this).addClass("current");
    });
  });

See what I did there? Before adding the current-class to $(this), i removed it from all the other products-slideshow-thumbs li a's

Anytime mate, I'm glad I could be of help – Apr 05 '11 at 15:55 — , Apr 05 '11 at 15:55

jQuery Cycle Plugin, add class to current slide thumbnail/link

1 Answers1