Eliminazione di un ciclo jQuery reattivo

Question

Ho creato un dispositivo di scorrimento di immagini reattive utilizzando jQuery cycle.

Il seguente setup che ho usato funziona bene, a parte il conten .cycle non viene cancellato correttamente, rendendo qualsiasi contenuto dopo essersi seduto al di sotto di esso.

Ciò è dovuto al fatto che il div è relativo ei suoi figli sono assoluti.

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

La mia domanda è: come faccio a cancellare il reattivo .cycle div senza avere un altezza fissa o utilizzando qualche evento Javascript pesante?

Ecco il mio codice su jsfiddle: http://jsfiddle.net/blowsie/HuNfz/19/

---

Aggiornamento:

ho scritto qualche codice per fissare l'altezza del ciclo, che funziona come previsto (anche se può bug a volte fuori), ma il suo evento è pesante e non molto fluido.

L'amore dell'amore per vedere può essere fatto in puro CSS o un cambiamento nell'impostazione del ciclo.

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

Answer 1

Il ciclo non è molto reattivo. Ma sicuramente Cycle2 lo è.Check it out qui: http://jquery.malsup.com/cycle2/

Answer 2

Di default il plugin assegna position: relative al tuo e anche per s all'interno che assegna position: absolute ei valori z-index. Il che rende la presentazione un floater/sbloccato in una pila. Ho trovato 2 soluzioni al problema:

1. Aggiungi classe clearfix al tuo e aggiungere stili CSS per clearfix nel foglio di stile.

   .clearfix: dopo { contenuto: "."; display: blocco; chiaro: entrambi; visibilità: nascosta; altezza riga: 0; altezza: 0; }

   .clearfix { display: blocco in linea; }

   html [xmlns] .clearfix { display: blocco; }

   • html .clearfix { altezza: 1%; }

2. (Non molto elegante) Aggiungi bordo alla classe ciclo

   .cycle {border: 1px solid # f00; }

Spero che uno di questi aiuti.

Answer 3

Forse l'aggiunta di finestre di ridimensionamento:

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

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

Answer 4

Vecchio palo, lo so.

Abbiamo funzionato in produzione con il ciclo. Cycle2 non era e non è ancora un'opzione per noi. Sfortunatamente, ciò comporta la modifica dei dati interni del ciclo. Fortunatamente, la correzione è semplice.

Quando il plug ciclo inizializza, esso aggiunge due propeties cycleW e cycleH a ciascuno dei DOM oggetto diapositive rispettivamente la larghezza e l'altezza iniziale di ciascuna diapositiva. Cycle utilizza queste proprietà per animare ogni diapositiva indipendentemente dalla dimensione della finestra.

Quando la finestra viene ridimensionata, è necessario cancellare ciclicamenteW e cicloH manualmente o impostarli su un valore predefinito.

Esempio (supponendo che il contenitore di presentazione è .slideshow):

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

Dobbiamo farlo funzionare molto bene in produzione.

html assomiglia a questo:

<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> 

Ora la funzione di finestra di ridimensionamento. Questa è la nostra versione. Potrebbe essere necessario personalizzarlo in base alle proprie esigenze. Fondamentalmente, memorizziamo il rapporto iniziale per i casi in cui sono state fissate le immagini nella presentazione. Ci sono volte in cui abbiamo presentazioni ad altezza variabile. Questo codice affronta entrambe le situazioni. Poi, azzera i valori interni cycleW e cycleH di ogni diapositiva elemento DOM per soddisfare il loro contenitore principale

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