jQuery ciclo complemento (a menudo) no funciona en Google Chrome

Question

Por alguna razón, cuando voy por primera vez a una página reciente que construí, el complemento jQuery Cycle no funciona. El sitio está ubicado en here (el sitio está en un idioma diferente [hebreo]).

Independientemente del idioma en el que se encuentre, el complemento Cycle funciona bien en Firefox e IE. Me pregunto si esto es un error en mi extremo o un error al final del complemento.

Si es un error de mi parte, ¿cómo puedo solucionarlo?

Answer 1

La solución a este problema, basado en el hecho de que Google Chrome no se muestre correctamente la altura de las generadas dinámicamente divs (como @ ulima69 observado), es dar el div envoltura (.slideshow) un ancho designado & altura que es congruente con el ancho/alto de las imágenes.

Esto corrige el error por ahora. Si las imágenes tienen dimensiones diferentes, se debe buscar una solución más complicada. @ ulima69 proporcionó dos enlaces a complementos de ciclo alternativos que deberían funcionar con Chrome en. Haz lo que te funcione.

Amit

Answer 2

Aquí hay una demostración rápida para usted: http://jsfiddle.net/VpnPb/4/. He usado jQuery 1.6.4 y todo funciona bien con diferentes dimensiones de imagen.

$('#s5').cycle({ 
 
    fx: 'fade', 
 
    pause: 1 
 
}); 
 

 
$('#s6').cycle({ 
 
    fx: 'scrollDown', 
 
    random: 1 
 
});

.pics { 
 
    height: 232px; 
 
    width: 232px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.pics img { 
 
    padding: 15px; 
 
    border: 1px solid #ccc; 
 
    background-color: #eee; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 0; 
 
    left: 0 
 
}

<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<script src="http://malsup.github.io/jquery.cycle.all.js"></script> 
 
<script src="http://malsup.github.io/chili-1.7.pack.js"></script> 
 

 
<div id="s5" class="pics"> 
 
    <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" /> 
 
    <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" /> 
 
    <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" /> 
 
</div> 
 
<br/> 
 

 
<div id="s6" class="pics"> 
 
    <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" /> 
 
    <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" /> 
 
    <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" /> 
 
</div>

Answer 3

Usted tiene que usar en lugar de .load ready para permitir que las imágenes se carguen en la página

$(window).load(function() { 
    $('.element').cycle(); 
});