Need to modify JQuery Cycle updateActivePagerLink option

Question

Hey everyone.

I'm creating a simple 3-image slide show, and I'm pretty new to Jquery and Cycle. I have the slideshow working, with 3 pager links that also work.

The only thing I need to accomplish is, add "activeSlide" functionality to the currently selected pager image, which I can't do in CSS by simply using the activeSlide class...because I want to change the active pager's image source...while if it were just simple text numbers by default, I would style the activeSlide class.

Essentially, I want to swap test-select-off.jpg with test-select-on.jpg when that active slide pager is reached.

Cycle code:

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
            timeout: '6500',
            pause: 'true',
            pager: '#testimonial-switcher',
            pagerAnchorBuilder: function(idx, slide) { 
             return '#testimonial-switcher li:eq(' + idx + ') a';       
            } 
    });
});

HTML code:

<div id="testimonial-switcher">
<ul>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
</ul>

How can I do this? I assume I'd need to do something in the updateActivePagerLink option by modifying the updateActivePagerLink function, taken from http://www.malsup.com/jquery/cycle/pager7.html:

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 

but like I said, i'm still learning this syntax, so any help would be greatly appreciated!

Answer 1

EDIT: Apparently, since I wasn't familiar with the plugin, my original answer didn't work. However, since you found something that partially does, I'll update the answer here with a solution that should work completely. All you have to do in addition to what you found is at the beginning of that function change them all to 'off' (line 1), then change the active one to 'on' (what you added).

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('img').attr('src','images/layout/test-select-on.jpg');
    $(pager).find('li').removeClass('activeLI') 
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI')
            .find('img').attr('src','images/layout/test-select-on.jpg'); 
};

Let me know if that works.

---

Original wrong answer (leaving it in so the comments make sense)
It looks like you can replace the src of the img within whichever li has the class .activeLI inside the after callback function (though I haven't used the Cycle plugin before and am just gleaning that last bit from the docs).

So change the Cycle code to:

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
        timeout: '6500',
        pause: 'true',
        pager: '#testimonial-switcher',
        pagerAnchorBuilder: function(idx, slide) { 
         return '#testimonial-switcher li:eq(' + idx + ') a';       
        },
        after: function(curr, next, opts) {
         $(curr).find('img').attr('src','images/layout/test-select-on.jpg');
        } 
    });
});

And let me know if that works! (Note: if this doesn't work try unwrapping the $() from the curr in the after: function()... like I said, haven't used this plugin before)