jquery - Change element attribute when image source changes

Question

I'm using the Nivo Slider Plugin that works in conjunction with the NextGen Gallery. What I'm trying to do is get the image source and rewrite a url when the image changes. I currently have this:

$(function() {
    var src = $('.nivo-main-image').attr('src');
    $("#social-buttons > #pinterest").attr('href', src);
});

It works on page load and gets the source of whatever image appears first and does almost exactly what I need it to do. However, I need it to change the href attribute whenever the image source changes in the slideshow. I looked into .change(), but that only works for various inputs.

Can anyone help with this, or point me in the right direction?

Answer 1

Try using this:

$(document).on('change', '.nivo-main-image', function () {
    var src = $(this).attr('src');
    $("#social-buttons > #pinterest").attr('href', src);
});

Edit, see comments below:

I added the following to the jquery.nivo.slider.js file at line 209:

var src = $('.nivo-main-image').attr('src');
$("#social-buttons > #pinterest").attr('href', src);

It works perfectly now. (until the plugin gets updated )

Answer 2

$('.nivo-main-image').attr('src').change(function(){
    var src = $('.nivo-main-image').attr('src');
    $("#social-buttons > #pinterest").attr('href', src);
})