Borrado de un ciclo jQuery receptivo

Question

He creado un control deslizante de imagen sensible usando jQuery cycle.

La siguiente configuración que he utilizado funciona bien, aparte de contener .cycle div no se borra correctamente, haciendo cualquier contenido después de que se sienta debajo de él.

Esto se debe a que el div es relativo y sus hijos son absolutos.

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

Mi pregunta es, ¿cómo puedo borrar el sensible .cycle div sin tener una altura fija o usar algún evento JavaScript pesada?

Aquí está mi código en jsFiddle: http://jsfiddle.net/blowsie/HuNfz/19/

---

Actualización:

escribí algo de código para fijar la altura del ciclo, que funciona como se esperaba (aunque puede saltones veces), pero su evento es pesado y no muy resbaladizo.

Id amor a ver se puede hacer en CSS puro o un cambio en la configuración del ciclo.

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

Answer 1

Ciclo no es muy sensible amigable. Pero Cycle2 definitivamente lo es.Échale un vistazo aquí: http://jquery.malsup.com/cycle2/

Answer 2

Por defecto el plugin asigna posición: en relación con su y también para s dentro que asigna posición: absoluta y los valores z-índice. Lo que hace que la presentación de diapositivas sea un flotante/despegue en una pila. Encontré 2 soluciones al problema:

1. Agregue la clase de clearfix a su y agregue los estilos CSS para clearfix en su hoja de estilo.

   .clearfix: después del { contenido: "."; pantalla: bloque; claro: ambos; visibilidad: oculta; línea-altura: 0; altura: 0; }

   .clearfix { pantalla: inline-block; }

   html [xmlns] .clearfix { mostrar: bloque; }

   • html .clearfix { altura: 1%; }

2. (no muy elegante) Añadir a la frontera a su clase de ciclo

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

Espero que una de estas ayude.

Answer 3

incluir eventualmente una ventana de cambio de tamaño:

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

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

Answer 4

Mensaje viejo, lo sé.

Lo tenemos trabajando en producción con el ciclo. Cycle2 no era y aún no es una opción para nosotros. Desafortunadamente, implica modificar los datos internos del ciclo. Afortunadamente, la solución es sencilla.

Cuando el plugin ciclo se inicia, añade dos propeties cycleW y cycleH a cada uno de objeto DOM sus diapositivas con, respectivamente, la anchura inicial y la altura de cada diapositiva. Cycle utiliza estas propiedades para animar cada diapositiva independientemente de la dimensión de la ventana.

Cuando se cambia el tamaño de la ventana, debe borrar cycleW y cycleH manualmente o configurarlos a un valor predeterminado.

Ejemplo (asumiendo que su contenedor de diapositivas es .slideshow):

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

Tenemos que trabajar muy bien en la producción.

html se ve así:

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

Ahora la función de ventana de cambio de tamaño. Esta es nuestra versión. Es posible que deba personalizar esto para que se ajuste a sus necesidades. Básicamente, almacenamos la proporción inicial para los casos en que tenemos imágenes fijas en la presentación de diapositivas. Hay veces que tenemos presentaciones de diapositivas de altura variable. Este código aborda ambas situaciones. A continuación, se restablece los valores internos y cycleW cycleH de cada elemento DOM de diapositivas para adaptarse a su contenedor principal

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