How to trigger page background change?

1
votes

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

2
javascriptjqueryjquery-cycle
You mean background-image ? background-color ? random background ? - Pierre de LESPINAY
Just find where the "cycle" event is triggered and call a function from there witch do something like $(body).css("background", "whatever") (if you have jQuery) or document.getElementByTag('body').backgroundWhateverYouWantToChange (ex backgroundImage) = "whatever" if not. - zozo
yes, background-image - Alexandr Sopkov

2 Answers

2
votes

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.

2
votes

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");
}