JQuery.cycle () is invisible in Webkit browsers [Safari / Chrome] on first boot (after update everything works fine!)
I am using jQuery loop to implement slideshow effect.
You can click any slideshow image to go to the next one.
This works great in all browsers. Only Safari is where something really weird happens. When the first page loads, the slideshow images are not displayed at all! After reloading the page (either by refreshing or by clicking the "Go" button next to the address bar) everything works as it should.
What's going on here? Am I doing something wrong? How can I fix this?
Update:
I am using the latest versions of both jQuery and the Cycle plugin. Here's the code I'm using to call .cycle ():
if (1 < $('.image-list li').size()) {
$('.image-list').cycle({ fx: 'uncover', speed: 200, timeout: 4000, next: $('.image-list li') }).addClass('image-list-cycle');
}
source to share
If you just google for this error, you will find a lot of people having problems with the jQuery plugin being applied to images. Usually problems arise in terms of position and display.
I feel like sometime the script runs just before the images are loaded and the width / length values used for the looped image are wrong. I would suggest you add something like this to your page (adapt the classes and names to your needs):
<script type="text/javascript">
$(document).ready(
function() {
$('.image-list li').each(function({$(this).css({
[SET HERE POSITION, WIDTH, ETC]});});
$('.image-list').cycle([OPTIONS]);});
</script>
source to share