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

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开发者_如何学Python or a bug on the plugin's end.

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

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

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

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

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>