javascript - jQuery cycle plugin (often) doesn't work in Google Chrome - Stack Overflow

admin管理员组

文章数量:1352026

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?

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?

• javascript
• jquery
• google-chrome
• cycle-plugin

Share Improve this question Follow edited Oct 16, 2011 at 21:42 pimvdb 155k8080 gold badges311311 silver badges356356 bronze badges asked Oct 16, 2011 at 21:38 AmitAmit 7,8481818 gold badges5555 silver badges6969 bronze badges 14

• 2 Are you using jquery 1.6? Try 1.5 version to solve. Its seems there is a problem forum.jquery./topic/… – walves Commented Oct 16, 2011 at 21:43
• Yes, I'm loading <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"></script> – Amit Commented Oct 16, 2011 at 21:44
• Interesting! I'm trying to revert back to jQuery 1.5. I think there's a plugin somewhere that's loading 1.6.1 other than my <script> shown above. Currently trying to detect where that's doing it, so I can fully revert back to 1.5 – Amit Commented Oct 16, 2011 at 21:48
• @ulima69: I made the switch to 1.5.2, however I believe the bug persists. Would you mind checking if it works on your end? – Amit Commented Oct 16, 2011 at 21:51
• 1 Okay, I think I might have found a solution. If I pre-declare the width and height of the cycling images, the problem seems to go away. It definitely has to do with Chrome failing to recognize the div's height at the first time, exactly like what @ulima69 said. Since all of these pictures will be the same height/width, I think this will do for now... – Amit Commented Oct 16, 2011 at 22:08

 |  Show 9 more ments

3 Answers 3

Sorted by: Reset to default 4

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 plicated 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/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./cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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./Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog./Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog./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./Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog./Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog./Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>

本文标签： javascriptjQuery cycle plugin (often) doesn39t work in Google ChromeStack Overflow