Reset or change slides array of jQuery plugin

Question

I'm using the supersized plugin for jQuery to show fullsize background pictures. I want to change the array with the images (with jquery.click()), but without reloading the page. The link loads the content into a div via AJAX, and at the same time I want to switch the array.

This is the default code I load for supersized:

$.supersized({
    random: 1,
    image_protect: 0,
    slide_interval: 5000,
    transition: 1,
    transition_speed: 3000,
    vertical_center: 0,
    horizontal_center: 0,
    fit_portrait: 1,
    slides:
    [
        {image : 'imgs/bg-01.jpg'},
        {image : 'imgs/bg-02.jpg'},
        {image : 'imgs/bg-03.jpg'},
    ]
});

This is what I've done to change the array:

$('#link1').click(function() {
    // placeholder for ajax load

    $.supersized({
        random: 1,
        image_protect: 0,
        slide_interval: 5000,
        transition: 1,
        transition_speed: 3000,
        vertical_center: 0,
        horizontal_center: 0,
        fit_portrait: 1,
        slides:
        [
            {image : 'other-imgs/new-bg-01.jpg'},
            {image : 'other-imgs/new-bg-02.jpg'}
        ]
    });
});

but this only adds the 2 new images to the other 3. How can I clear the first array and/or replace the content of it?

Answer 1

UPDATED

Here's what I do to reload Supersized with dynamic slides and to prevent it from going batshit crazy with the new slides (i had mine jump randomly from a slide to another speeding up)

create a function in your main JS file that will be called to update the slides :

function start_supersized(slides) {
    $('#supersized-loader').empty().remove();
    $('#supersized').empty().remove();
    $('#hzDownscaled').empty().remove();
    $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    $.supersized({slides: slides}); // add your other SZ options here
};

all we're doing here is emptying and removing the DOM elements that SZ appends to the body of our document, and initializing the plugin again.

Then we can call this function with a slides array as an argument, ie:

var new_slides = [{image: "/img/slide1.png"}, {image: "/img/slide2.png"}];
start_supersized(new_slides);

That's not all though. We need to tweak a couple of lines inside the supersized JS file (yeah it's a hack, but the plugin authors won't get back to me)

In the un-minified version of the script, version 3.2.7 you'll have to:

1) remove the very first lines, where this happens (lines 17 / 20 or so)

    $(document).ready(function() {
        $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    });

update

2) add var slideshow_intervals = [];

this array will keep track of all the interval id's the plugin will create

3) locate the function

    base._start = function() { 

(around line 124) and add to the top of the function this line :

jQuery.each(slideshow_intervals, function(i, e) {
 clearInterval(e);
}); 

4) wherever there's a setInterval() call, add the returned value to our array, like so:

slideshow_intervals.push(vars.slideshow_interval); 

All this is used to reset the supersized animation intervals and prevents the script to start speeding up between a frame and the other. I know it's kinda hacky, but hey.

Answer 2

To stop supersized 3.2.7 from speeding up on re-initialize dynamic slideshows. I made this changes in the uncompressed javascript file:

search for "base._start" function (around row 116)

paste: clearInterval(vars.slideshow_interval);

in the top of the base._start function to clear all previous initialized intervals.

that should do it.