Verwenden Sie jQuery zum Zurücksetzen von Funktionen, damit Plugins funktionieren.

Question

Ich verwende eine jQuery-Bildergalerie (in diesem Fall FlexSlider), um mehrere Galerien auf einer Seite darzustellen. Es kann immer nur einer angezeigt werden. Um dies zu berücksichtigen, benutze ich fadeIn/fadeOut, nachdem ich auf ein Thumbnail geklickt habe. Das Problem ist die Galerie bricht. Ich habe mehrere ausprobiert und sie brechen auf verschiedene Arten. Ich bin mir sicher, dass es eine Möglichkeit gibt, das Plugin "zurückzusetzen", damit es nicht kaputt geht. Hier ist, was ich tue, die, wenn sie auf einer Seite mehrere Schieber präsentieren, sollte nach dem Ort arbeiten:

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> 

Wie einfach verblassen ein Schieberegler aus und verblassen den anderen herein. Aber wenn ich es tue, wird es wackelig. Also, gibt es wieder einen Weg, den Schieberegler sozusagen "zurückzusetzen", damit er bei jedem div funktioniert?

Answer 1

Ich glaube, das Problem ist die Tatsache, dass Sie die Schieberegler initialisieren, und dann ausblenden.

Der Plugin-Code wird gestartet und beginnt mit dem Animationsprozess und versucht dann, Elemente zu animieren, die ausgeblendet sind. Dies führt dazu, dass jQuery zusammenbricht.

Laden Sie den neuesten Code von GitHub (https://github.com/woothemes/FlexSlider/) und Ihr Problem sollte mit Ihrer aktuellen Implementierung behoben werden. Ich habe vor Kurzem Präventionslogik hinzugefügt, um den Schieberegler daran zu hindern, Aktionen auszuführen, wenn der Schieberegler nicht sichtbar ist.