Jquery image slideshow works, but jumpy, needs preloading, difficulties on how though
Okay, with the help of this forum, thanks for that (!), I managed to have a slideshow up and running using jqeury that automatically get images from a folder using php, sorts them with array, and converts the whole into a slideshow. the thing is this:
the slideshow consists of at least 300 images. I don't know if that's the cause, but when I view it, the slideshow is not functioning smooth. Sometimes it takes a while for an image to display, some appear longer than others, the whole page in general takes a time to initialize, as if some part of the code is struggling with all the images..
I've looked into some preloading threads here and there, but have difficulties implementing them, testing them, and I am not sure either what the main problem in my code is that causes the above described issues..
Hoping for someone to shed some light on this ;)
Many thanks! Sam
The slideshow can be found here: http://samweerdmeester.nl/slideshow2/
The code is:
[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>AmpedWebStandards.com: DEMO - Dynamic Image Slideshow with PHP and JQuery</title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
//function preload(arrayOfImages) {
//$(arrayOfImages).each(function () {
// $('<img />').attr('src',this).appendTo('body').css('display','none');
// });
//}
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 2,
speed: 10
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow/';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = "\"".$directory.$item."\"";
$imgpath = "<img src=".$path." />";
$imagearray[] = $imgpath;
}}
sort($imagearray);
$length = count($imagearray);
for ($i = 0; $i < $length; $i++) {
print $imagearray[$i];
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
[/CODE]