How to trigger page background change?

Question

I have slideshow, via jq cycles plugin, and I want to change my page background after each new slide?

I will be thankful for any hints where to look.

upd: I found option "after" on jq cycle, will try to work around it

Answer 1

You can use the before and after callback in the option settings, example:

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$('.slideshow').cycle({
    before: function(){ $('body').css('background-color', get_random_color()); },
    fx: 'fade'
}); 

hope this helps.

Answer 2

I presume you are referring to: http://jquery.malsup.com/cycle/ ?

The documentation at http://jquery.malsup.com/cycle/options.html should help you greatly.

I believe you could achieve it by doing the following:

$('#slideshow').cycle({
    fx: 'fade',
    onPrevNextEvent: onSlideChange()    
});


function onSlideChange() {
    //perform all changes on slide change here.
    $("body").css("background-image", "test.jpg");
}