I use this code to create a list of clickable img ids
$('.cycler').each(function() {
var container = $(this);
container.append('<div class="cycler_controls"><a href="#" id="pause_resume" class="active">pause</a>');
for (var j = first_pic; j < last_pic;) {
if (j < 10) {
container.find('.cycler_controls').append('<a class="page" href="#" rel="' + '0' + j + '">' + ('0' + j) + '</a>');
} else {
container.find('.cycler_controls').append('<a class="page" href="#" rel="' + j + '">' + (j + 1) + '</a>');
}
j++
}
I want to highlight the id associated with each image as the slide show proceeds but don’t know how to extract the relevant number or what code I need to use to cvhange each background as the slide show progresses
The show is driven by :
function cycleImages(container) {
var $active = container.find('img.active');
var $next = ($active.next('img').length > 0) ? $active.next('img') : container.find('img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
var timer = setTimeout(function() {
cycleImages(container)
}, 3000);
container.data('timer', timer);
}
I think I need code with the above function the sets the relevant cycler_control rel or attr appropriately.
I should add that whilst pretty experience in javascript I am not yet fluent in JQuery!
To see the background of the id nbumber change as the slides do