Imageslider what shows all images from a folder
Posted: Mon Mar 30, 2009 11:44 pm
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
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.
===============================================
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.
Thats it
The only thing you have todo is upload more images to 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

The only thing you have todo is upload more images to the folder pics.
