CODEWITHSUNDEEP
phpjavascriptjquery
Mark Henry
Mark Henry

Reputation: 2699

Change the sequence of background images

I have this JavaScript function to display a sequence of background images. What I want is to change to sequence for every page with php. In this case I want to substitute the x in bg_x_ps.jpg with a number in the range of 1 to 8. Each background must have an unique number. 

$.vegas( 'slideshow', {
    delay: 34000,
    backgrounds: [
        { src: "http://sionvalais.com/images/bg_2_ps.jpg", fade: 4000 },
        { src: 'http://sionvalais.com/images/bg_4_ps.jpg', fade: 4000 },
        { src: 'http://sionvalais.com/images/bg_5_ps.jpg', fade: 4000 },
        { src: 'http://sionvalais.com/images/bg_7_ps.jpg', fade: 4000 }
    ]
} )( 'overlay' );

Upvotes: 0

Views: 243

Answers (2)

techfoobar
techfoobar

Reputation: 66663

Try something like:

$(document).ready(function() {

...

var indices = [], x;
while(indices.length < 4) {
    x = parseInt(Math.ceil(Math.random() * 8), 10);
    x = (x == 0) ? 1 : x;
    if(indices.indexOf(x) == -1) indices.push(x);
}

$.vegas( 'slideshow', {
    delay: 34000,
    backgrounds: [
        { src: "http://sionvalais.com/images/bg_"+indices[0]+"_ps.jpg", fade: 4000 },
        { src: "http://sionvalais.com/images/bg_"+indices[1]+"_ps.jpg", fade: 4000 },
        { src: "http://sionvalais.com/images/bg_"+indices[2]+"_ps.jpg", fade: 4000 },
        { src: "http://sionvalais.com/images/bg_"+indices[3]+"_ps.jpg", fade: 4000 }
    ]
} )( 'overlay' );

...

});

Upvotes: 1

AgnosticMantis
AgnosticMantis

Reputation: 716

Just build your order of images within an PHP array. Then parse it to json (maybe with json_encode()) and send it to your javascript.

Upvotes: 0

Related Questions