How can I detect if jQuery lightslider has been instantiated, and how to clear instance if yes

I'm using JQuery lightSlider. It works pretty well (well, actually, I had to jig the code a little bit, but enough of that for now).

What I am trying to achieve is to dynamically replace the lightSlider content with ajax return data, and this I can do.

With each new data set, I call the lightSlider plugin again. This is the "success" or "done" section of my ajax function:

        var lightsliderstring = "";
        for(i=1;i<thumbsArray.length;i++){
            lightsliderstring     += "<li>\n";
            if( $("#as_feature").val() ){
                lightsliderstring     += "   <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
            }
            lightsliderstring     += "   <img src=\"/" + thumbsArray[i] + "\" />\n";
            lightsliderstring     += "</li>\n";
        }

        $("#lightSlider").html(lightsliderstring);

        $('#lightSlider').lightSlider({
            auto: true,
            gallery: false,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 0
        });

I call lightSlider again, with each new ajax call, because calling lightSlider only once doesn't seem to work. Maybe it's because the content is dynamically created after the DOM is loaded? Anyway, what I would like to do is clear the lightSlider function after each ajax call, because I think they are piling up on each other in the same div.

After one lightSlider call, it looks good:

single instance of lightSlider

But on my second ajax call, when lightSlider is instantiated again, it starts to "stack". Notice the doubled-arrows, vertically misaligned, and also the vertically doubling of the index dots below the picture:

what my lightSlider container looks like after a second call

What would cure this is some way to clear the first instance of lightSlider.

Answers:

Answer

Assuming you are using a newer version of lightslider than 1.1.3 you should be able to .destroy() the existing instance as follows:

var slider = $('#lightslider').lightSlider();
slider.destroy();   

For safety, you will need to check the slider is something before you call the destroy method though!

Answer

The $("#lightSlider").empty() or $("#lightSlider").html('') didn't work for some reason. The lightslider instances continued to pile up with every new form submission. I don't know why. Neither did the ("#lightSlider").lightslider().destroy() method seem to work, and that could be for some odd reason that I can't pinpoint, maybe something to do with the way I'm manipulating the DOM, I don't know.

What finally worked was to nest the <ul id="lightSlider">...</ul> block within a <div id="carousel-container">...</div> block. Then, with each new form submission, I deleted the entire #lightSlider block with a $("#carousel-container").html(''); Then I dynamically re-created the entire <ul id="lightSlider">...</ul> with the new, updated content. Here's the working code:

        $("#carousel-container").html('');
        var lightsliderstring = "<ul id=\"lightSlider\">";
        for(i=1;i<thumbsArray.length;i++){
            lightsliderstring     += "<li>\n";
            if( $("#as_feature").val() ){
                lightsliderstring     += "   <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
            }
            lightsliderstring     += "   <img src=\"/" + thumbsArray[i] + "\" />\n";
            lightsliderstring     += "</li>\n";
        }
        lightsliderstring += "</ul>\n";

        $("#carousel-container").html(lightsliderstring);

        $('#lightSlider').lightSlider({
            auto: true,
            gallery: false,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 0
        });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.