Page 1 of 1

Imageslider what shows all images from a folder

Posted: Mon Mar 30, 2009 11:44 pm
by Eddy
Imageslider what shows all images uploaded in the folder pics.
http://www.javascriptkit.com/javatutors ... php2.shtml


Insert this php code in notepad and save the page as: getimages.php

Code: Select all

<?
//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=".") {
$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);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?> 

Make a folder with the name:pics on your server.
Upload your images and the page getimages.php into the folder pics

===============================================
Insert the codes below in the html or php page where you like to see the slideshow.(any page you like)

Insert this code in: page html--> between the head tags.

Code: Select all

<script src="pics/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "pics/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

===============================================
Insert this code in HTML object and draw the HTML object to the size of your images.
Change image1.jpg with the name from your first image.

Code: Select all

<img id="slideshow" src="pics/image1.jpg" />

Thats it :wink:
The only thing you have todo is upload more images to the folder pics. :D

Posted: Tue Dec 22, 2009 7:30 pm
by Eddy
1)Does your server support php.

2)All pages/folders must uploaded to your server to make it work.

3)I did not test with document xhtml, try with document html or set the document in page properties to None.

4)Is the page getimages.php in the folder pics?:
Upload your images and the page getimages.php into the folder pics
5)Give the folder read and write permissions (cmod to 755 or 777 )