Löschen eines reagierenden jQuery-Zyklus

Question

Ich habe einen reaktionsfähigen Bildregler mit jQuery cycle erstellt.

Die folgende Einrichtung, die ich verwendet habe, funktioniert gut, abgesehen von der enthaltenen .cycle div wird nicht richtig gelöscht, so dass alle Inhalte, nachdem sie darunter sitzen.

Dies ist aufgrund der Tatsache, dass das Div ist relativ und seine Kinder sind absolut.

 $('.cycle').cycle({ 
     slideResize: true, 
     containerResize: false, 
     fit: 1, 
     width: "fit" 
    }); 

Meine Frage ist, wie kann ich die reaktions .cycle div löschen, ohne eine feste Höhe oder ein Ereignis schwer mit Hilfe von JavaScript?

Hier ist mein Code auf jsfiddle: http://jsfiddle.net/blowsie/HuNfz/19/

---

Update:

ich einige Code geschrieben, die Höhe des Zyklus zu beheben, die als (obwohl es kann Fehler aus manchmal erwartet funktioniert), aber sein Ereignis schwer und nicht sehr glatt.

Id Liebe zu sehen, kann in reinem CSS oder eine Änderung in der Zyklus-Setup erfolgen.

http://jsfiddle.net/blowsie/HuNfz/22/

Answer 1

Zyklus ist nicht sehr reaktionsfreundlich. Aber Cycle2 ist definitiv.Check it out hier: http://jquery.malsup.com/cycle2/

Answer 2

Standardmäßig ordnet das Plugin Position: relativ zu Ihrem und auch zu s innerhalb dass es ordnet position: absolute und z-Indexwerte. Das macht die Slideshow zu einem Floater in einem Stapel. Ich habe 2 Lösungen für das Problem gefunden:

1. Fügen Sie Ihrer Klasse die clearfix-Klasse hinzu und fügen Sie CSS-Stile für clearfix in Ihr Stylesheet ein.

   .clearfix: nach { Inhalt: "."; Anzeige: Block; klar: beide; Sichtbarkeit: versteckt; Zeilenhöhe: 0; Höhe: 0; }

   .clearfix { Anzeige: Inline-Block; }

   html [xmlns] .clearfix { Anzeige: Block; }

   • html .clearfix { Höhe: 1%; }

2. (Nicht sehr elegant)

   .cycle {border Grenze zu Ihrem Zyklus-Klasse hinzufügen: 1px solid # f00; }

Hoffe einer dieser hilft.

Answer 3

möglicherweise ein Resize-Fenster hinzugefügt:

$(window).resize(function() { 
    $('.cycle').height($('img:visible').height()); 
}); 
setTimeout(300, $(window).resize()); 

http://jsfiddle.net/HuNfz/60/

Answer 4

Alte Post, die ich kenne.

Wir haben es in der Produktion mit Zyklus arbeiten. Cycle2 war und ist für uns keine Option. Leider müssen die internen Daten des Zyklus geändert werden. Zum Glück ist die Lösung unkompliziert.

Wenn die Zyklus-Plugin initialisiert, fügt er zwei propeties cycleW und cycleH jedem Ihres Dia DOM-Objekt mit jeweils der ursprünglichen Breite und Höhe jeder Folie. Cycle verwendet diese Eigenschaften, um jede Folie unabhängig von der Dimension des Fensters zu animieren.

Wenn das Fenster in der Größe geändert wird, müssen Sie cycleW und cycleH manuell löschen oder auf einen vorgegebenen Wert setzen.

Beispiel (unter der Annahme Ihrer Diashow Behälter ist .slideshow):

$(".slideshow").children("div").each(function(){ 
    this.cycleW = $(this).width(); 
    this.cycleH = $(this).height(); 
}); 

Wir haben es in der Produktion sehr gut funktioniert.

html wie folgt aussieht:

<div class="slideshow"> 
    <div class="slide"><img src=".." width="100%" height="auto"/></div> 
    <div class="slide"><p>Copy copy copy no photo on slide </p></div> 
    <div class="slide"><img src=".." width="100%" height="auto"/></div> 
    <div class="slide"><p>Copy copy copy no photo on slide </p></div> 
    ... 
</div> 

nun das Fenster Resize-Funktion. Das ist unsere Version. Möglicherweise müssen Sie dies an Ihre Bedürfnisse anpassen. Grundsätzlich speichern wir das Anfangsverhältnis für die Fälle, in denen wir Bilder in der Diashow fixiert haben. Es gibt Zeiten, in denen wir Slideshows mit variabler Höhe haben. Dieser Code spricht beide Situationen an. Dann setzt er die internen cycleW und cycleH Werte jedes Dia DOM-Element ihrer übergeordneten Container

$(window).resize(function(){ 
    // first time around, save original width & height for ratios and complicated preloading 
    $(".slideshow").each(function(i,elt){ 
     var originalWidth = $(elt).data("originalWidth"); // check existence of our ratio cache 
     if (typeof originalWidth == "undefined") { 
      var containerWidth = $(elt).parent().first().width(); // auto scale to container width. 
      var containerHeight = $(elt).parent().first().height(); 
      $(elt).data("originalWidth",containerWidth); 
      $(elt).data("originalHeight",containerHeight); 
     } 
    }); 

    // fix slideshows to their container width 
    $(".slideshow").each(function(i,elt){ 
     var containerWidth = $(elt).parent().first().width(); 
     var originalWidth = $(elt).data("originalWidth")*1; 
     var originalHeight = $(elt).data("originalHeight")*1; 
     var height = Math.floor(originalHeight*containerWidth/originalWidth); // maintain original ratio 
     $(elt).css("width", containerWidth+"px").css("height",height+"px"); // container actual dimensions. height might get reset again below 
     $(elt).children("div").css("width", containerWidth+"px"); // reset each slide width 
                   // (fails once slide moves out, because the cycle plugin will use a cached value) 
     $(elt).children("div").children().css("width", containerWidth+"px"); // fix direct children (images or divs - images should have height auto). 

     // recompute max height based on inside slide, not just photos. 
     // some slideshows have variable height slides. 
     var maxHeight = 0; 
     var panelArray = $(elt).children("div"); 
     for (var i = 0; i < panelArray.length; i++) { 
      var height = $(panelArray[i]).height(); 
      if (height > maxHeight) maxHeight = height; 
     } 
     if (maxHeight > 0) { 
      $(elt).height(maxHeight); 
     } 

     // fix internal cycle dimension cache (cycleW and cycleH on each slide) 
     $(elt).children("div").each(function(){ 
      this.cycleW = containerWidth; 
      this.cycleH = maxHeight; 
     }); 
    }); 
});