//a part of essentialPhp.php
//get array of images from a directory
function getImgArr($directory){
$path=$_SERVER['DOCUMENT_ROOT'].$directory;
//open directory
$dir=opendir($path);
//init array to store image files only, not just any files
//coulda combined the process with the above loop, but just wanted to do it right in the demo.
$imgArray=array();
//examine each entry in the directory and store the files in an array.
while($f=readdir($dir)){
//check the filetype(). it should return either "file" or "dir"
if(filetype($path.$f)=="file"){
//the getimagesize() function returns an array of 7 values, including width, height and image type
$getImgSize=getimagesize($path.$f);
//if the imagetype returns a value from 1 to 16, which are the indices for the image type catalog, meaning it's an image file
if($getImgSize[2]>0 && $getImgSize[2]<=16){
$imgArray[]=$f;
}
}
}
return $imgArray;
}//end getImgArr();
#exContainer{
position:relative;
height:400px;
}
.rotImg{
position:absolute;
}
include_once($_SERVER['DOCUMENT_ROOT']."/esScripts/essentialPhp.php");
$imgDir="/experiments/files/programming/2009/090713-readdir/screenSlideShow/";
$imgArray=getImgArr($imgDir);
$showableImgArr=array();
foreach($imgArray as $key => $f){
$imgSize=getimagesize($_SERVER['DOCUMENT_ROOT'].$imgDir.$f);
$imgType=$imgSize[2];
if($imgType==1 || $imgType==2 || $imgType==3){
$showableImgArr[]=$f;
}
}
echo "\n".'<div id="exContainer">'; // so the divs inside can absolute position against this container
foreach($showableImgArr as $key => $f){
echo "\n".'<div class="rotImg" id="rotImg'.$key.'" style="top:'.($key*50).'px;left:'.($key*100).'px;z-index:'.$key.'"><img src="'.$imgDir.$f.'" alt="Image '.$key.'" /></div>';
}
echo "\n".'</div>';
//collect number of showable images for looping
echo '<script type="text/javascript">'."\n".'<!--'."\n";
echo 'var numShowableImg='.count($showableImgArr).';'."\n";
echo '//--></script>';
var timer=setInterval("startFade()",1000);
function startFade(){
//array to collect indices of each image every time the slideshow runs
var zIndices=new Array();
//init a variable to hold the top image.
var topImg;
//First: collect the indices of the images and find which one is on top
for(var i=0;i<numShowableImg;i++){
zIndices[i]=$(".rotImg:eq("+i+")").css("z-index");
if(zIndices[i]==(numShowableImg-1)){
topImg=i;
}
}
//Then, fadeout the top image, with a callback
$(".rotImg:eq("+topImg+")").fadeOut("slow",function(){
//callback: run through all the images and change the z-indices by adding 1
//but after, change the topImg image's z-index to 0 and turn the display back to "block" after the fadeOut
for(var i=0;i<numShowableImg;i++){
var nextIndex=Number(zIndices[i])+1;
$(".rotImg:eq("+i+")").css({"z-index":nextIndex});
//console.log(i+" "+$(".rotImg:eq("+i+")").css("z-index"));
}
$(this).css({
"display":"block",
"z-index":"0"
});
});
}