January 24th, 2013, 03:28 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 4
Time spent in forums: 1 h 18 m
Reputation Power: 0
|
|
|
Jquery slideshow flickers the first cycle, after that okay, how to solve?
hello everybody,
I have used a jquery plugin called cycle, that turns a list of images in a slideshow. I use PHP to dynamically create the image list, and the plugin makes it into a slideshow. All fine. The thing is, that the first cycle of slides show a flicker in between the slides. I now have 11 images to illustrate, and the slideshow shows 11 flickers, and then the slideshow operates as should, with instant slide changes!
the example can be viewed here:
samweerdmeester[dot]nl/slideshow2/
refresh for the flickering example, and then notice how the second cycle works fine. I made the background of the container red to make the flicker behaviour more visible.
What is going on? I tried everything, Why can't I get this thing to behave as should right away?
All the code can be found in de source of the example page, and the cycle plugin is from jquery[dot]malsup[dot]com/cycle/
hope to get some advice, this is driving me crazy..
the essence of the code can be found here too:
PHP Code:
<head>
<style>
#myslides {
position: absolute;
top: 100;
left: 100;
width: 640px;
height: 400px;
cursor: none;
padding: 0;
margin: 0 auto;
list-style-type: none;
}
#myslides li {
background-color: red;
top: 100;
left: 100;
display: none;
cursor: none;
border: 0px solid rgb(100,100,100);
width: 640px;
height: 400px;
}
#myslides li.first {
display: block;
}
</style>
</head>
<?php
$directory = 'images/slideshow/';
try {
// Styling for images
echo "<ul id=\"myslides\" >";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = "".$directory.$item."";
$imgpath = "<li data-cycle-image=\"".$path."\"></li>";
$imagearray[] = $imgpath;
}}
sort($imagearray);
$length = count($imagearray);
for ($i = 0; $i < $length; $i++) {
print $imagearray[$i];
}
echo "</ul>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
<script type="text/javascript">
$(document).ready(function() {
$('#myslides li:first').css('background', 'url(' + $(this).attr('data-cycle-image') + ') center center no-repeat').removeAttr('data-cycle-image');
$('#myslides').cycle({
fx: 'none',
speed: 700,
timeout: 10,
before: function(currSlideElement, nextSlideElement) { // Lazy loading of images
var data_cycle_image = $(nextSlideElement).attr('data-cycle-image');
if (typeof data_cycle_image !== 'undefined' && data_cycle_image !== false) {
$('#myslides').cycle('pause');
var enlarge_preload = new Image();
enlarge_preload.src = data_cycle_image;
enlarge_preload.onload = function() {
$(nextSlideElement).css('background', 'url(' + enlarge_preload.src + ') center center no-repeat').removeAttr('data-cycle-image');
$('#myslides').cycle('resume');
}
}
}
});
});
</script>
<body>
</body>
</html>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
