PDA

View Full Version : Page of pictures PHP



chris24300
12-17-2009, 06:05 PM
Hi, I'm trying to make a web page so I can view images in my directory, to make my webserver more eye friendly. I learned HTML a while back so I'm still refreshing. I'm trying to build a page where the full picture is on the left half of the page and the right half is a list of all thumbnails. First off I have the page refreshing every 70 seconds to check for updated images. I have a php script that is supposed to read all images within a directory and export as gallery[0], [1], ...



<?
//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$)|(\.jpeg$"); //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 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}

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

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


I found this script that is of a slideshow, but instead I would like to list the images individually. Does anyone know how to I can modify this script to do so? Or at least head me in the right direction. Here is the 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>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="pics/bear.gif" />
</div>


I modified it slightly to give me the most recent image as my large thumbnail (full image) on the left half. This is where I'm stumped.


<script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
}


All help is appreciated,
Chris

hdewantara
12-23-2009, 03:38 PM
If the images and also the directory
in your server are already "world readable",
why do you need the php?

regards,