Plugin chu kỳ jQuery (thường) không hoạt động trong Google Chrome

Question

Vì một số lý do, khi tôi lần đầu tiên truy cập trang gần đây mà tôi đã tạo, plugin jQuery Cycle không hoạt động. Trang web có vị trí here (trang web bằng ngôn ngữ khác [tiếng Do Thái]).

Bất kể ngôn ngữ của nó ở đâu, plugin Cycle hoạt động tốt trong Firefox và IE. Tôi tự hỏi nếu đây là một lỗi trên đầu của tôi hoặc một lỗi trên kết thúc của plugin.

Nếu đó là lỗi của tôi, làm cách nào để khắc phục sự cố?

Answer 1

Các giải pháp cho vấn đề này, dựa trên thực tế là Google Chrome không hiển thị chính xác chiều cao của của div tạo động (như @ ulima69 quan sát), là để cung cấp cho các gói div (.slideshow) chiều rộng được chỉ định & chiều cao đồng hành với chiều rộng/chiều cao của hình ảnh.

Sửa lỗi này ngay bây giờ. Nếu hình ảnh là tất cả các kích thước khác nhau, một giải pháp phức tạp hơn nên được tìm kiếm. @ ulima69 cung cấp hai liên kết đến các plugin chu kỳ thay thế mà nên hoạt động với Chrome. Hãy làm những gì cho bạn.

Amit

Answer 2

Đây là bản trình diễn nhanh cho bạn: http://jsfiddle.net/VpnPb/4/. Tôi đã sử dụng jQuery 1.6.4 và mọi thứ hoạt động tốt với các kích thước hình ảnh khác nhau.

$('#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>

Answer 3

Bạn phải sử dụng .load thay vì .ready để cho phép những hình ảnh để tải trên trang

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