Refresh slidejs

Question

I'm using slidejs from http://www.slidesjs.com/ and I wanted to refresh the list of images, because I need to add and remove images on the fly.

Is there any way to do this? I've tried to use the delete $.fn.pluginName but no luck.

Thanks

Answer 1

I've come up with a (rather funky) solution. It might not be the best way since heavy DOM manipulations/starting the plugin is used, but I hope you get the idea. The result can be found on this JSFiddle.

HTML

<input type="button" id="add" value="Add slide!" />

<div id="slides">
    <img src="http://placehold.it/100x100" />
    <img src="http://placehold.it/120x120" />
    <img src="http://placehold.it/140x140" />
    <img src="http://placehold.it/160x160" />
    <img src="http://placehold.it/180x180" />
</div>

JavaScript

// Create a clone of the images array
var $originalClone = $("#slides").children().clone();

// Remove the parent (we'll create it dynamically)
$("#slides").remove();

// Create the new slides, add the children & add it to the DOM
var $newSlides = $("<div />")
    .append($originalClone)
    .appendTo($("body"));

// Execute the slide plugin
$newSlides.slidesjs({
    width: 940,
    height: 528
});

$("#add").on("click", function() {
    // Remove the old slider
    $newSlides.remove();

    // Create a new slider, add the children & add it to the DOM
    var $newSlides2 = $("<div />")
        .append($originalClone)
        .appendTo($("body"));

    // Add the new image to the newly created slider
    $("<img />")
        .attr("src", "http://placehold.it/200x200")
        .appendTo($newSlides2);

    // Execute the slide plugin
    $newSlides2.slidesjs({
        width: 940,
        height: 528
    });

    // In this demo, the button "add slide" can be clicked once
    $("#add").remove();
});

I hope this solution gives you a hint in the good direction!