cycle2 - jquery extend plugin

Despejando un ciclo jQuery receptivo

Question

Creé un deslizador de imagen sensible que usa el ciclo jQuery .

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

Esto se debe al hecho de que 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 div .cycle responsive sin tener una altura fija o usar JavaScript de eventos pesados?

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

Actualizar:

Escribí un código para arreglar la altura del ciclo, que funciona como se esperaba (aunque puede fallar algunas veces), pero su evento es pesado y no muy resbaladizo.

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

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

Answer 1

El ciclo no es muy receptivo amigable. Pero Cycle2 definitivamente lo es. Compruébelo aquí: http://jquery.malsup.com/cycle2/

Answer 2

Por defecto, el plugin asigna una posición: relativa a su y también a s dentro de la que asigna posición: valores absolutos y z-index. 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 clearfix a su y agregue estilos CSS para clearfix en su hoja de estilo.

   .clearfix: after {content: "."; bloqueo de pantalla; Limpia los dos; visibilidad: oculta; línea-altura: 0; altura: 0; }

   .clearfix {display: inline-block; }

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

   • html .clearfix {altura: 1%; }

2. (No muy elegante) agregue borde a su clase de ciclo

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

Espero que uno de estos ayude.

Answer 3

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

Publicación anterior, lo sé.

Lo tenemos trabajando en producción con 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 se inicializa el complemento del ciclo, agrega dos propecies cycleW y cycleH a cada objeto DOM de tus diapositivas con el ancho y el alto inicial de cada diapositiva, respectivamente. 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 (suponiendo que su contenedor de diapositivas es .slideshow):

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

Lo tenemos funcionando muy bien en 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 ventana cambia el tamaño de la función. 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. Luego, restablece los valores internos cycleW y cycleH de cada elemento DOM del deslizamiento para que se ajuste 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;
        });
    });
});