Question

I am trying to implement a slideshow using jQuery
I have a button called SlideShow and clicking it would trigger the slide show.
I display a set of thumbnails:

<div class="pics">
 <img u="bob" id="pic1" src="/photos/thumbs/file1.jpg" class="apt" f="file1.jpg">
 <img u="rob" id="pic2" src="/photos/thumbs/file2.jpg" class="apt" f="file2.jpg">
 <img u="job" id="pic3" src="/photos/thumbs/file3.jpg" class="apt" f="file3.jpg">
 <img u="tom" id="pic4" src="/photos/thumbs/file4.jpg" class="apt" f="file4.jpg">
 <img u="scott" id="pic5" src="/photos/thumbs/file5.jpg" class="apt" f="file5.jpg">
</div>

You can see the thumbs has class ‘apt’ which will allow me to get the set of all thumbs.
The click event handler just need to call a function in a loop with a setInterval(f, 5000)
That way I read info of one thumb every 5 sec and load the full image from the server.

But I get undefined no matter how I do it. Here is the code:

   var idx='';
   function SlideShow() {
     idx = 1;   //global variable to track index of current thumb inside <div>
     setInterval("GetFullImage()",5000);
   }

   function GetFullImage(){
     var i = $('.apt:nth-child(' + idx + ')').attr("id"); 
     var u = $('.apt:nth-child(' + idx + ')').attr("u"); 
     var f = $('.apt:nth-child(' + idx + ')').attr("f");
     alert('i:=' + i + ' u:' + u + ' f:' + f); <-- always say i, u, f undefined after first time
     idx++;        
   }

What is wrong? I haven’t played much with setInterval() calls.

Answer 1

You’re referencing the nth-child not the sibling. The images are all siblings of each other, not one residing in the next. I would take it up a level, then use nth-child. or just grab:

$('.pics').children('img').length

as a threshold, then use:

$('.pics img:eq('+idx+')')

This way you keep upping idx until you’ve reached the limit, then reset the counter.