Dynamic wordpress background Based on Slider images

Question

I am using nivoSlider on wordpress and I want the background of my homepage to change based on the current slide image! I have no experience in javascript nor jquery but im good in php / html5 / css3. Thanks.

Answer 1

The WordPress nivo slider does not have the ability to edit callbacks on slider change (unless you edit the plugin, thus breaking compatibility with future versions). But the general jQuery plugin allows you to do just that. You would do something like this when setting up the slider:

$('#slider').nivoSlider({
    // [snip]
    afterChange: function(){
        // Get the currently active image
        var active_image = $(".nivo-controlNav .active");
        // Change the class on your element and style that element with CSS
        // E.g. by fetching some attribute with $(active_image).attr()
    },
    // [snip]
});