jQueryを使用してプラグインを動作させるための機能をリセットする

Question

jQueryイメージギャラリー（この場合はFlexSlider）を使用して、ページに複数のギャラリーを表示しています。一度に表示できるのは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つのスライダが外に出て消えてしまいます。しかし、私がそうすると、それはうんざりします。だから、もう一度、各divで動作するようにスライダを「リセット」する方法がありますか？

Answer 1

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

プラグインコードが起動し、アニメーション処理が開始され、非表示になっている要素をアニメートしようとします。これはjQueryを分解させます。

最新のコードをGitHub（https://github.com/woothemes/FlexSlider/）からダウンロードしてください。問題は現在の実装で修正する必要があります。私は最近、スライダが見えない場合にスライダがアクションを実行しないように防止論理を追加しました。