0

jQuery 画像ギャラリー (この場合はFlexSlider ) を使用して、1 つのページに複数のギャラリーを表示しています。一度に表示できるのは 1 つだけです。これに対応するために、サムネイルをクリックした後、fadeIn/fadeOut を使用しています。問題はギャラリーブレイク。いくつか試してみましたが、さまざまな方法で壊れます。プラグインが壊れないように「リセット」する方法があると確信しています。これが私がやっていることです。ページに複数のスライダーを表示するとき、サイトに従って動作するはずです:

jQuery:

<script type="text/javascript" charset="utf-8">
      $(window).load(function() {

        $('#main-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlsContainer: ".flex-container"
        });

        $('#secondary-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlNav:true,
        controlsContainer: ".flex-container"
        });

      });

      $(function(){
        $('#main-slider,#secondary-slider').hide();

//1//       

  $('.gal_icon_1').click(function(){
        $('#secondary-slider').fadeOut(function(){
        $('#main-slider').fadeIn();
        });
  });

//2//

   $('.gal_icon_2').click(function(){
        $('#main-slider').fadeOut(function(){
        $('#secondary-slider').fadeIn();
        });
  });

    });
    </script>

html:

<div class="container">
    <div id="main-slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/BVL_CHANDRA-B_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_CHANDRA-BLUE_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_JEWELS_MM_2010_A3.jpg" />
            </li>
        </ul>
    </div>

1 つのスライダーをフェードアウトさせ、もう 1 つのスライダーをフェードインさせるだけです。繰り返しになりますが、スライダーを「リセット」して各 div で動作させる方法はありますか?

4

1 に答える 1

2

問題は、スライダーを初期化してから非表示にすることだと思います。

プラグインコードが起動してアニメーション化プロセスを開始し、非表示になっている要素のアニメーション化を試みます。これにより、jQueryが機能しなくなります。

GitHub（https://github.com/woothemes/FlexSlider/）から最新のコードをダウンロードすると、現在の実装で問題が修正されるはずです。最近、スライダーが表示されていない場合にスライダーがアクションを実行しないようにする防止ロジックを追加しました。

于 2012-04-11T05:33:01.637 に答える