Est-il détruire méthode pour FlexSlider

Je suis en train d'essayer de réinitialiser FlexSlider avec actualisation de la page lorsqu'une nouvelle galerie de l'inscription est de manière asynchrone.

Je pense que la routine ci-dessous pourrait fonctionner, mais il ne le fait pas. Il semble que la première FlexSlider persiste même si les nouvelles images sont correctement chargé.

Est-il un moyen de le détruire, puis de reconstruire la galerie?

Grâce

function flexInit() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: ".paginator",
            manualControls: 'a',
            after: function(slider){
                if(slider.atEnd == true)    {
                    //??? slider.destroy;
                    galBuild();
                }
            }
        });
    }

    function galBuild() {
            $.getJSON("/gallery/next/"+galID, function (data) {
            var results = data.objects;
            var list = $(".flexslider ul.slides");
            var i = 0;
            $.each(results, function () {

                list.append('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');

            });

            flexInit(); 

            });
    }

    galBuild();
  • d'où "galID" argument passé dans galBuild() la fonction?
  • Salut Kundan... galID est juste une galerie mondiale variable déclarée plus tôt. N'a pas vraiment d'incidence sur la réinitialisation de FlexSlider
InformationsquelleAutor rob - not a robber | 2012-06-28
  1. 9

    je suis en utilisant approche différente, c'est à dire

    vous avez commencé une flexslider:

     
$('#element).flexslider({ 
animation: "slide", 
controlNav: false, 
directionNav: true 
});

    quand je veux changer de diapositives précédemment créé curseur et le redémarrer, l'id de faire les choses suivantes:

    • la création de temporaty div:

      $('#element).before('
    <div id="element_temp" class="flexslider"></div>
');

    • supprimer div précédemment créé curseur

      $('#element).remove();

    • insérer une nouvelle liste de diapositives temporaire div:

      var html = `
<ul class='slides">
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
</ul>`;
$('#element_temp').html(html);

    • commencer flexslider sur temp div

      $('#element_temp').flexslider({
  animation: "slide",
  controlNav: false,
  directionNav: true
});

    • changement div ID de element_temp à l'élément

      $('#element_temp').attr('id','element');

    et il travaille avec de multiples flexliders

    • cela a été très utile - je n'ai pas besoin de changer l'id à la fin si c'était de la défonce jusqu'au point de départ de mon curseur mais je apprecaited l'info
    • Merci!!!! C'est malheureux FlexSlider ne fournit pas un moyen facile de "reset" avec le curseur. Cette solution semble fonctionner bien.
    InformationsquelleAutor Sebastian Duchowicz
  2. 2

    Rob j'ai étudié cela et de trouver la solution

    Vous avez besoin de modifier vos fonctions comme ce

    function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}


function galBuild() {
   $.getJSON("/gallery/next/"+galID, function (data) {
    var results = data.objects;
    var i = 0;
    $.each(results, function () {
       return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');
    });

   });
}

flexInit();

    Aussi vous avez besoin de faire quelques changements cosmétiques dans flexSlider.js fichier dans curseur.mise à jour fonction. maintenant sa ne vérifiant pas la position de la variable si elle vient undefined, de sorte que vous aurez à vérifier cela.

    • Kundan... vous êtes certainement me prendre sur la droite de la route ici. Merci. Lorsque le FlexSlider est appelé encore une fois cependant, la zone de contrôle va sauvage en essayant d'obtenir le programme d'installation et j'ai une pile d'erreur $.flexslider.des méthodes.controlNav.mise à jour $.flexslider.curseur.mise à jour, je vais vous tenir au courant de mes progrès
    InformationsquelleAutor Kundan Singh Chouhan
  3. 2

    Le plus simple est d'enlever la flexscroll de l'élément dataset 

    function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}
//this remove flexslider form element dataset
$('.flexslider').removeData("flexslider");

    et maintenant vous êtes libre de les appeler 

    flexInit();

    et votre flexslider sera recréé.

    InformationsquelleAutor Rumen