6

新しいギャラリー リストが非同期的に呼び出されたときに、ページを更新せずに FlexSlider を再初期化しようとしています。

以下のルーチンは機能すると思いますが、機能しません。新しい画像が正常にロードされても、最初の FlexSlider が持続しているようです。

ギャラリーを破棄してから再構築する方法はありますか?

ありがとう

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();
4

3 に答える 3

10

私は別のアプローチを使用しています

1 つの flexslider を開始しました:

    $('#要素).flexslider({
      アニメーション：「スライド」、
      controlNav: 偽、
      方向ナビゲーション: true
    });

以前に作成したスライダーでスライドを変更して再起動したい場合は、次のことを行います。

  • 一時的な div の作成:

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

  • 以前に作成したスライダーで div を削除する

    $('#element).remove();

  • スライドの新しいリストを一時的な 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);

  • temp div で flexslider を開始する

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

  • div ID を element_temp から element に変更します

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

複数のフレックスライダーで動作します

于 2012-12-04T10:56:38.030 に答える
2

Rob iはこれを調査し、解決策を見つけました

このように関数を変更する必要があります

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();

また、 slider.update関数のflexSlider.jsファイルに外観上の変更を加える必要があります。現在、位置変数が未定義の場合はチェックされないため、これもチェックする必要があります。

于 2012-06-28T18:02:20.583 に答える
2

最も簡単な方法は、要素データセットからフレックススクロールを削除することです

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");

そして今、あなたは自由に電話することができます

flexInit();

フレックススライダーが再作成されます。

于 2013-11-05T21:08:10.537 に答える