Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue:
The suggested fix for Cycle is to hide all images except the first one using CSS. For example:
#slideshow img { display: none }
#slideshow img.first { display: block }
...
<div id="slideshow">
<img src="image1.jpg" width="200" height="200" class="first" />
<img src="image2.jpg" width="200" height="200" />
<img src="image3.jpg" width="200" height="200" />
</div>
I initially wanted to apply these css lines to my cycle2 code, but the recommendation didn't work. Now I'm seeking help on how to prevent the flashing issue.
Below is the snippet of cycle2 code in my inc/top.inc.php file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://example.com/js/jquery.cycle2.min.js"></script>
<div class="fl_left logo_add">
<div class="fl_left cycle-slideshow"
data-cycle-slides=">a"
data-cycle-timeout="15000"
data-cycle-pause-on-hover="true"
data-cycle-speed="500"
>
<a title="<?=$lang[1159]?>" href="<?=$h?>"><img src="<?=$im?>logo.jpg" > </a>
<a title="<?=$lang[1159]?>" href="<?=$h?>p9.html"><img src="<?=$im?>logo.jpg" > </a>
</div>
Here are links to the files:
Slideshow codes start from --LOGO ADD-- in top.inc.php
Thanks, S