plug-in jQuery cycle (spesso) non funziona in Google Chrome

Question

Per qualche motivo, quando prima vado a una pagina recente che ho creato, il plugin jQuery Cycle non funziona. Il sito si trova here (il sito è in un'altra lingua [ebraico]).

Indipendentemente dalla lingua in cui si trova, il plug-in Cycle funziona perfettamente con Firefox e IE. Mi chiedo se questo è un bug sulla mia fine o un bug alla fine del plugin.

Se si tratta di un bug sulla mia estremità, come posso risolvere il problema?

Answer 1

La soluzione a questo problema, sulla base del fatto che Google Chrome non riesce a rendere correttamente l'altezza delle generate dinamicamente div (come @ ulima69 osservato), è quello di dare il div wrapping (.slideshow) una larghezza designata & altezza congruente con la larghezza/altezza dell'immagine.

Questo corregge il bug per ora. Se le immagini fossero tutte di dimensioni diverse, si dovrebbe cercare una soluzione più complicata. @ ulima69 ha fornito due link a plug-in di ciclo alternativi che devono essere compatibili con con Chrome. Fai ciò che funziona per te.

Amit

Answer 2

Ecco una breve demo per voi: http://jsfiddle.net/VpnPb/4/. Ho usato jQuery 1.6.4 e tutto funziona bene con diverse dimensioni dell'immagine.

$('#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

Devi usare .load invece di .ready per consentire le immagini da caricare nella pagina

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