Reputation: 7631
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.
Upvotes: 0
Views: 255
Reputation: 101614
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.
Upvotes: 1
Reputation: 7342
Try this, i.e. remove the speech marks and brackets from "GetFullImage()"
setInterval(GetFullImage,5000);
Upvotes: 0