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>