CODEWITHSUNDEEP
javascriptjqueryflexslider
EGxo
EGxo

Reputation: 315

Reload Flexslider

I am using the flexslider plugin which is triggered by the following code:

 $(window).on('load', function () {
    $('.flexslider').flexslider();
  });

This runs once the page has loaded. Later in the application I've replaced the contents of the flexslider (the number of images in it and their sources) and need to re-load the flexslider.

My code is as follows:

document.getElementById('contestant1').onclick = function() {
    process();  
}   

output = "";
for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}
document.getElementById('images').innerHTML = output;
console.log(output);
$('.flexslider').flexslider();

Please tell me how to force the flexslider to re-load. Here is a link to the full application, however it has a few more complex elements not relevant to the problem:

http://eg-graphics.com/zwooper/EGVGV/Season2/MemoryWall.html

Upvotes: 0

Views: 3468

Answers (2)

P. Frank
P. Frank

Reputation: 5745

You can revmove the older flexslide and reinit it.

output = "";

for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}

var images = $("#images").append(output);
console.log(output);
$(".flexslider").remove();
$(".Your-flexslider-container").append("<div class='flexslider'></div>");
$(".flexslider").html(images);
$('.flexslider').flexslider();

Is it an example because i dont now how is your html flexslider .Try to make this code work for you.

Upvotes: 0

EGxo
EGxo

Reputation: 315

Figured out a fix:

Added the line: $('#flexslider').removeData("flexslider");

before this one: $('.flexslider').flexslider();

Runs like a dream

Upvotes: 2

Related Questions