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?

Are you using jquery 1.6? Try 1.5 version to solve. Its seems there is a problem http://forum.jquery.com/topic/cycle-plugin-bug-with-jquery-1-6-chrome-11-0 — walves, Oct 16 '11 at 21:43
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 ` — Amit, Oct 16 '11 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, Oct 16 '11 at 21:51
I think the page link has some problem not with the script if we click on the Logo then again it runs fine. — coder, Oct 16 '11 at 21:52
@user944919: I agree that it's buggy, and I know what you mean regarding the logo. It doesn't necessarily have to do with the logo itself, it's just that sometimes after you refresh the page, it'll all-of-a-sudden work. What makes you think it's a bug on my end? — Amit, Oct 16 '11 at 21:54
May be the internal link to the homepage or any other javascript.Logo in the sense the customer obsession image. — coder, Oct 16 '11 at 21:55
The problem continue. It seems that chrome doesn't recognize cycle div's height in the first time. — walves, Oct 16 '11 at 21:59
The Site link which you provided if we open from here the Jquery Cycle is not working properly if we open by http://www.customer-obsession.co.il/ then it runs fine — coder, Oct 16 '11 at 22:00
@ulima69: I see... Do you think there would be an easy way to fix this issue, or should I instead find a different slideshow / cycle plugin... — Amit, Oct 16 '11 at 22:01
@user944919: I do not believe the problem is related to the hyperlink on StackOverflow. I think it probably has to do with initial settings, something along the lines of what ulima69 mentioned — Amit, Oct 16 '11 at 22:02
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, Oct 16 '11 at 22:08
well, how the problem its recurrent with other users. try another like http://holyshared.github.com/Gradually/index.html or http://nouincolor.com/floom/1.1/Demos/ — walves, Oct 16 '11 at 22:08

score 4 · Answer 1 · edited Aug 01 '12 at 20:15

4

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

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

edited Aug 01 '12 at 20:15

Josh Darnell

11,304
9
38
66

answered Aug 01 '12 at 20:07

Mike Sawicki

53
5

score 4 · Accepted Answer · answered Oct 16 '11 at 22:27

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

score 0 · Answer 3 · edited Jun 20 '17 at 05:07

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>

That's a nice example, but it's also exactly what I was doing in my code, therefore it doesn't help me solve my problem. Please read the comments above, especially what @ulima69 said. Chrome fails to recognize the dimensions of the dynamically generated div's on start-up. Because you assign a width/height, the bug doesn't happen in your case (and coincidentally, this is also the way to fix the problem, assign an original height/width). — Amit, Oct 16 '11 at 22:24

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

3 Answers3