Jquery Cycle with Custom Thumbnail navigation
http://www.fbcmadison.org/
Here's the current cycle code:
$(document).ready(function(){
$('#pics').before('<div id="nav" class="nav">').cycle({
next: '#next',
prev: '#prev',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '<span id="thumb"><a href="#"><img src="' + slide.src + '" /></a></span>';
}
});
});
Here's the Cycle code that I want to use in order to link the main image. However, when it "creates" the thumbnail, it only uses the first image. How do have it generate the thumb for each image?
$(document).ready(function(){
$('#pics').before('<div id="nav" class="nav">').cycle({
next: '#next',
prev: '#prev',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var slideSRC= $(slide).find('img').attr('src');
return '<span id="thumb"><a href="#"><img src="' + slideSRC + '" /></a></span>';
}
});
});
Here's the slideshow HTML
<div id="slideshow">
<div id="navigation"><a href="#" id="prev">Previous</a><a href="#" id="next">Next</a></div>
<div id="pics"><img width="910" height="369" src="/clientimages/38974/pictures/fallfestwebslides2012.jpg" alt="" /><img width="910" height="369" src="/clientimages/38974/pictures/occslidewostamp.jpg" alt="" /> <img width="910" height="369" src="/clientimages/38974/pictures/madchristmasspecwebslides2012.jpg" alt="" /></div>
</div>