1

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.

1
  • could you possibly show a jsfiddle.net Apr 5, 2011 at 15:51

1 Answer 1

2

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

1
  • Anytime mate, I'm glad I could be of help
    – user657496
    Apr 5, 2011 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.