jQuery cycle plugin (often) doesn't work in Google Chrome

Question

For some reason, when I first go to a recent page I built, the jQuery Cycle plugin does not work. The site is located here (site is in a different language [Hebrew]).

Regardless of the language it's in, the Cycle plugin works fine in Firefox and IE. I'm wondering if this is a bug on my end or a bug on the plugin's end.

If it's a bug on my end, how can I fix it?

Answer 1

You have to use .load instead of .ready to allow the images to load on the page

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

Answer 2

The solution to this problem, based on the fact that Google Chrome fails to properly render the height of the dynamically generated div's (as @ulima69 observed), is to give the wrapping div ( .slideshow ) a designated width & height that is congruent with the images' width/height.

This fixes the bug for now. If the images were all different dimensions, a more complicated solution should be sought. @ulima69 provided two links to alternative cycle plugins that should work with Chrome. Do what works for you.

Amit

Answer 3

Here is a quick demo for you: http://jsfiddle.net/VpnPb/4/ . I have used jQuery 1.6.4 and everything works fine with different image dimensions.

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