PHP: Build a Dynamic Picture Viewer

Display all pictures in a directory without having to keep track of or input file names. This PHP script retrieves a list of all images inside the directory and passes them in an array to be displayed. The menu to choose the image to display is also automatically generated. In IE and Firefox the images will fade in.

Save this PHP code as getpics.php. It should be in the directory with the images, but you can configure it otherwise


<?
Header("content-type: application/x-javascript");
$pathstring=pathinfo($_SERVER&#91;'PHP_SELF'&#93;);
$locationstring="http://" . $_SERVER&#91;'HTTP_HOST'&#93;.$pathstring&#91;'dirname'&#93; . "/";

function returnimages($dirname=".") {
	 $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)";
   $files = array();
	 $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
                     echo 'picsarray&#91;' . $curimage .'&#93;="' . $file . '";';
                     $curimage++;
               }
       }

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

echo 'var locationstring="' . $locationstring . '";';
echo 'var picsarray=new Array();';
returnimages()
?>

And here's the HTML page to view the images. You can stylize it however you'd like.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show all images</title>
<style type="text/css">
#picturearea{
	filter:alpha(opacity=100);
	-moz-opacity: 0;
}
</style>
<script src="getpics.php" type="text/javascript"></script>
<script type="text/javascript">
function populateSelect(selectobj)
{
	for (var i=0; i<picsarray.length; i++)
		selectobj.options&#91;selectobj.options.length&#93;=new Option(picsarray&#91;i&#93;, picsarray&#91;i&#93;)
	if (selectobj.options.length>1)
	{
		selectobj.selectedIndex=0
		showpicture(document.getElementById("picsform").picslist)
	}
}
function showpicture(selectobj)
{
	piccontainerobj=document.getElementById("picturearea")
	resetfade(10)
	piccontainerobj.innerHTML='<img src="'+locationstring+selectobj.options&#91;selectobj.selectedIndex&#93;.value+'">'
	fadepictoview=setInterval("gradualfade(piccontainerobj)",50)
}
function resetfade(degree)
{
	if (window.fadepictoview)
		clearInterval(fadepictoview)
	if (typeof piccontainerobj.style.MozOpacity=="string")
		piccontainerobj.style.MozOpacity=degree/100
	else if (piccontainerobj.filters)
		piccontainerobj.filters.alpha.opacity=degree
}
function gradualfade()
{
	if (typeof piccontainerobj.style.MozOpacity=="string" && piccontainerobj.style.MozOpacity<1)
		piccontainerobj.style.MozOpacity=Math.min(parseFloat(piccontainerobj.style.MozOpacity)+0.2, 0.99)
	else if (piccontainerobj.filters && piccontainerobj.filters.alpha.opacity<100)
		piccontainerobj.filters.alpha.opacity+=20
	else //if not IE or Moz
		clearInterval(fadepictoview)
}
window.onload=function()
{
	populateSelect(document.getElementById("picsform").picslist)
}
</script>

</head>
<body>
<div style="float: left; width: 200px;">
	<form id="picsform">
		<select name="picslist" size="4" style="width: 200px" onClick="showpicture(this)"></select>
	</form>
</div>
<div id="picturearea" style="float: left; width: 400px; height: 300px; margin-left: 20px">
</div>
</body>
</html>

PHP: Build a Dynamic Picture Viewer

Leave a Reply Cancel reply