PDA

View Full Version : Java Script Slide with a little push from PHP



EthanAllen
Apr 12th, 2012, 03:12 AM
Hi there

This is basically what I want to do:

I want to have a slideshow that reads content of a folder and then shows the pictures and has a little fade animation between each image transition.

to achieve this:

I've done the following:

1. I'm using a php script to read the contents of a folder and spits out results in an array that I can use with my java script

2. im using jquery.cycle plugin to add the "fade" effect.

Now my problem is My images are shown but i cant get the fade animation to work on my images.

here is how my code looks like:

My php file:



<?
//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 .'";' . "\n";
$curimage++;
}
}

closedir($handle);
}
sort($files);
return($files);
}

echo 'var galleryarray=new Array();' . "\n"; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names

?>


My html file:




<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">

<?php echo $files ?>
<!-- <div id="myslides"> -->
<!--<img src="100.jpg" />
<img src="101.jpg" /> -->

</body>
</html>






Please tell me how to fix it.