Question

I’ve got a larger slider image and a smaller “thumbnail” image. I have this code so far:

 $j(".slider-img").each( function(){
  var slideSource = $j(this).attr("src");
   $j(".slider-thumb").each(function() {
    $j(this).attr("src", slideSource); 
   });
 });

But its giving me the image from the first slide for all of the thumbnails. So I want to take the source from each .slider-img and apply it to each .slider-thumb. Ideas?

Answer 1

Presuming the .slider-img that corresponds to a .slider-thumb is in the same position in the document, relative to the others with that class, you can use this:

var thumbs = $j('.slider-thumb');
$j('.slider-img').each(function(i) { // i is the position in the set
    thumbs.eq(i).attr('src', this.src); // set the src attribute of the element with position i in the thumbs set to the src of this element
});