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

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();
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";


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


My html file:

<meta http-equiv="refresh" content="1000"/>
<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

<!-- 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">
fx: 'fade',
speed: 5000,
timeout: 2000

<script type="text/javascript">

var curimg=0;
function rotateimages(){
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 type="text/javascript" language="JavaScript" src="./code.php"></script>


<img id="myslides" src="100.jpg">

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


Please tell me how to fix it.