Question

I am using a NivoSlider in one of my projects, this specific client has asked for the active thumbnail image to change based on the slide being shown. I have looked through the documentation and can’t find anything about changing the image itself, therefore I think the best option is to change the image itself with a Jquery function. Despite that, I’m stuck on how to achieve this.

The NivoSlider creates this HTML:

<div class="nivo-controlNav">
    // Active Thumbnail Link
    <a class="nivo-control active" rel="0">
        <img alt="" src="images/inactive_wedge.png">
    </a>
    // Inactive Thumbnail Link
    <a class="nivo-control" rel="1">
        <img alt="" src="images/inactive_wedge.png">
    </a>
</div>

The plugin adds a class of active to the <a> for the image slide that is showing.

I’m trying to change the containing <img> source attribute to display ‘active_wedge.png’ when the active class is applied to the <a> tag.

How would I achieve this with Jquery? (it’s times like this that I realise how little I know!)

I’ve tried something along these lines:

if ($('.nivo-control').hasClass('active')) {
    // Not really sure what to put here at all
}

Is this correct, or am I approaching this badly?

Thanks in advance.

Additional JS:

$(window).load(function() {
    $('#theslides').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 3500, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){
            // Putting code to change the thumbnail image in here
            if ($('.nivo-control').hasClass('active')) {
                $('.nivo-control .active img').attr('src','images/active_wedge.png');
            }
        }, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Answer 1

without using if hasclass just:

   $('.nivo-control.active img').attr('src','images/active_wedge.png')