All geek questions in one place

JQuery loop plugin (often) doesn't work in Google Chrome

For some reason, when I first went to the last page I built, the jQuery Cycle plugin does not work. The site is here (the site is in another language [Hebrew]).

Regardless of the language in which it works, the Cycle plugin works fine in Firefox and IE. I am wondering if this is an error at my end or an error at the end of the plugin.

If this is a mistake at my end, how can I fix it?

+6
source share
3 answers

The solution to this problem based on the fact that Google Chrome could not properly display the height of the dynamically generated div (as shown in @ ulima69) is to provide a wrapping div ( .slideshow ) of the specified width and height that matches the width / height of the image .

This fixes the error. If the images were of different sizes, you need to look for a more complex solution. @ ulima69 provided two links to alternative loop plugins that should work with Chrome. Do what works for you.

Amit

+4
source

You should use .load instead of .ready so that images load on the page

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

Here's a quick demo: http://jsfiddle.net/VpnPb/4/ . I used jQuery 1.6.4 and everything works fine with different image sizes.

 $('#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.imtqy.com/jquery.cycle.all.js"></script> <script src="http://malsup.imtqy.com/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>
0
source

Source: https://habr.com/ru/post/899417/

More articles:


All Articles