плагин цикла jQuery (часто) не работает в Google Chrome - PullRequest
Новая
       41

плагин цикла jQuery (часто) не работает в Google Chrome

6 голосов
/ 17 октября 2011

По какой-то причине, когда я впервые захожу на недавно созданную мной страницу, плагин jQuery Cycle не работает.Сайт расположен здесь (сайт на другом языке [иврит]).

Независимо от того, на каком языке он работает, плагин Cycle отлично работает в Firefox и IE.Мне интересно, если это ошибка на моем конце или ошибка на конце плагина.

Если это ошибка на моем конце, как я могу это исправить?

Ответы [ 3 ]

4 голосов
/ 17 октября 2011

Решение этой проблемы, основанное на том факте, что Google Chrome не может правильно отобразить высоту динамически генерируемых div-ов (как заметил @ ulima69), состоит в том, чтобы придать div-обертке (.slideshow) заданную ширину и высоту это соответствует ширине / высоте изображений.

Это исправляет ошибку на данный момент. Если бы изображения были разных размеров, нужно искать более сложное решение. @ ulima69 предоставил две ссылки на альтернативные плагины цикла, которые должны работать с Chrome. Делай то, что работает для тебя.

Amit

4 голосов
/ 02 августа 2012

Вы должны использовать .load вместо .ready, чтобы изображения могли загружаться на страницу

$(window).load(function() {
    $('.element').cycle();
});
0 голосов
/ 17 октября 2011

Вот короткая демонстрация для вас: http://jsfiddle.net/VpnPb/4/. Я использовал jQuery 1.6.4, и все отлично работает с разными размерами изображения. 

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