[in addition to my other topic/although on a separate note]
Okay this is what I want to do:
To have a slideshow that reads content of a folder and then shows the pictures and has a little fade effect between each image transition.
To achieve this I’ve done the following:
-
I’m using a php script to read the contents of a folder and spits out the results in an array that I can use within my java script
-
im using jquery.cycle plugin to add the “fade” effect.
Now my problem is that my images are shown but i cant get the fade effect from JQuery cycle plugin to have any any effects on my images.
here is how my code looks like:
My php file:
PHP Code:
<?
//PHP SCRIPT: getimages.php
header('content-type: application/x-javascript');
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname="./images") {
$pattern="(\\.jpg$)|(\\.png$)|(\\.jpeg$)|(\\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";' . "\
";
$curimage++;
}
}
closedir($handle);
}
sort($files);
return($files);
}
echo 'var galleryarray=new Array();' . "\
"; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
My html file:
Code:
<html>
<meta http-equiv="refresh" content="1000"/>
<head>
<title>Media Signage Slideshow</title>
<style type="text/css">
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.picsimg {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
#slideshow { height: 100%px; width: 100%px; margin: auto }
#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#slide {width: 370px; height: 220px; padding: 0; margin: 0 auto; }
#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}
</style>
</head>
<!-- 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>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
galleryarray.sort();
document.getElementById("myslides").setAttribute("src", "images/"+galleryarray[curimg]);
curimg = (curimg+1) % galleryarray.length;
}
$('#myslides').ready(function() {
$('#myslides').fadeOut('slow', function() {
// Animation complete.
});
});
window.onload = function(){
setInterval("rotateimages()", 5000);
}
</script>
<script type="text/javascript" language="JavaScript" src="./code.php"></script>
<body>
<img id="myslides" src="100.jpg">
<!-- <div id="myslides"> -->
<!--<img src="100.jpg" />
<img src="101.jpg" /> -->
</body>
</html>
Please tell me how to fix it.