Sill wrestling with jquery cycle plugin, almost there, please some help
okay, I've been wrestling with the jquery cycle plugin for almost a full week now.
I tried tons of examples and tutorials, and all slide shows they all fail to yield a constant slide show with INSTANT slide changes right away from the start...
At this point I have a folder containing 11 images. My slideshow fetches those using php, and puts them in a slideshow using the cycle plugin, as found on github.com.
The first round the slideshow runs, has an anoying break in between images. After that first run, the slideshow performs as should. I gave the <li> a red background to make this behaviour more visible.
The slide show can be seen in action here: Notice the 11 red flashes in the first round, and the INSTANT image changes in the rounds after, as it should be.
How do I make this slideshow have INSTANT slide changes RIGHT AWAY??
Please help me on this, I'm getting crazy ... :(
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BUSHNELL TEST 2 NEW</title>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<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>