A continuation of the previous slideshow demo but with controls to play, stop, advances, and select slides.
The images in this demo stack one on top of another from 1 to 9, which is why the top image starts with 9 and plays down to 8, 7, 6, etc.
14 July 2009
include_once($_SERVER['DOCUMENT_ROOT']."/esScripts/essentialPhp.php");
$imgDir="/experiments/files/programming/2009/090714-slideshowWControl/images/";
$imgArray=getImgArr($imgDir);
$showableImgArr=array();
$topW=0;
$topH=0;
foreach($imgArray as $key => $f){
$imgSize=getimagesize($_SERVER['DOCUMENT_ROOT'].$imgDir.$f);
$imgType=$imageType[$imgSize[2]];
if($imgType=="GIF" || $imgType=="JPEG" || $imgType=="PNG"){
$showableImgArr[]=$f;
}
//get the width of the widest image
if($imgSize[0]>$topW){
$topW=$imgSize[0];
}
//get the height of the tallest image
if($imgSize[1]>$topH){
$topH=$imgSize[1];
}
}
echo nl().'<style type="text/css">';
echo nl().'#slideContainer{width:'.$topW.'px;height:'.$topH.'px;}';
echo nl().'</style>';
//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();
body{
background-color:#ccc;
}
#slideContainer{
position:relative;
}
.rotImg{
position:absolute;
}
a{
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
a:link,a:visited{}
a:hover{color:white;}
a:active{color:yellow;}
<div id="slideContainer">
<?php
echo '';
foreach($showableImgArr as $key => $f){
echo "\n".'<div class="rotImg" id="rotImg'.$key.'" style="z-index:'.$key.'"><img src="'.$imgDir.$f.'" alt="Image '.$key.'" /></div>';
}
?>
</div><!--end slideContainer -->
<div id="slideNav">
<h2>Slide Navigation</h2>
<p>slideAction: <span id="slideActionStatus"></span></p>
<p>If slideshow is playing, hovering over image will pause slideshow. When cursor leaves the image, the slideshow starts after a wait (if it was playing before).
<ul>
<li><a id="sn_startstop">Start/Stop</a> || Start/stop status: <span id="startStopStatus"></span></li>
<li><a id="sn_prev">Previous slide</a> (Stops slideshow) </li>
<li><a id="sn_next">Next slide</a> (Stops slideshow) </li>
<li id="sn_indivClick">Click (Stops slideshow)|
<?php
foreach($showableImgArr as $key => $f){
echo "\n".'<a id="sn_imageClick_'.$key.'" class="sn_image">'.($key+1).'</a> | ';
}
?>
</li>
<li id="sn_indivHover">Mouse over (If slideshow was playing, it will pause until cursor moves out of link, then it will wait a while before playing) |
<?php
foreach($showableImgArr as $key => $f){
echo "\n".'<a id="sn_imageHover_'.$key.'" class="sn_image">'.($key+1).'</a> | ';
}
?>
</li>
</ul>
</div><!-- end slideNav -->
var f_playing=false; //flag for whether the slideshow is in continuous play
var timer; //for continous play
var delayInt; //for delay start to continuous play
//set default interactive action
var slideAction="continuous";
//collect number of showable images for looping
var numShowableImg=<?php echo count($showableImgArr); ?>;
//for when an individual link is clicked
var newZis=new Array(numShowableImg); //to collect the new z-index of each image
var selectedImageIndex; //gets the image index (not the z-index) of the selected image
$("#sn_startstop").click(function(){
slideAction="continuous";
if(f_playing==false){
runInterval();
} else {
stopInterval();
}
updateSlideActionText();
});
$("#sn_prev").click(function(){
slideAction="previous";
stopInterval(); //stops slideshow when clicked
updateSlideActionText();
startFade(); // fade only once
});
$("#sn_next").click(function(){
slideAction="next";
stopInterval(); //stops slideshow when clicked
updateSlideActionText();
startFade(); //fade only once
});
$("#sn_indivClick .sn_image")
.click(function(){
slideAction="individual click";
//collect the index of the image link clicked, should correspond with the image index
selectedImageIndex=$("#sn_indivClick .sn_image").index(this);
stopInterval(); // stops slideshow when clicked
updateImageIndiv();
});
$("#sn_indivHover .sn_image")
.mouseenter(function(){
//slideshow doesn't necessary stop, but pauses (if it was playing)
slideAction="individual mouse over";
//collect the index of the image link hovered, should correspond with the image index
selectedImageIndex=$("#sn_indivHover .sn_image").index(this);
updateImageIndiv();
})
.mouseleave(function(){
//initialize the delay, then start the slideshow again (if it was playing)
delayInterval();
});
$("#slideContainer")
.mouseenter(function(){
clearInterval(timer);//stops the slideshow, but keep the f_playing as is so when mouse leaves, the delay can start
})
.mouseleave(function(){
//initialize the delay, then start the slideshow again (if it was playing)
delayInterval();
});
function updateImageIndiv(){
clearInterval(timer); //stops the timer no matter what, but keep f_playing as is
updateSlideActionText();
//set the selected image's z-index as highest
newZis[selectedImageIndex]=(numShowableImg-1);
//a constant for calculating the other z-indices
var topMinusIndex=numShowableImg-selectedImageIndex;
//for image indices created before the selected image
for(var i=(selectedImageIndex-1);i>=0;i--){
newZis[i]=i+topMinusIndex-1;
}
//for image indices created after the selected image
for(var i=(numShowableImg-1);i>selectedImageIndex;i--){
newZis[i]=i-selectedImageIndex-1;
}
//perform fade only once, let the slideAction in the function determine whether to init a delay
startFade();
}
function updateStartStopText(){
if(f_playing==true){
$("#startStopStatus").html("Playing");
$("#sn_startstop").html("Stop");
} else {
$("#startStopStatus").html("Stopped");
$("#sn_startstop").html("Play");
}
}
function updateSlideActionText(){
$("#slideActionStatus").html(slideAction);
}
function runInterval(){
clearInterval(timer); //clear any existing interval to prevent multiple intervals running at once
timer=setInterval("startFade()",1000); // start the interval
f_playing=true; //whenever this function is run, the f_playing is obviously set to true
updateStartStopText();
}
function stopInterval(){
clearInterval(timer);
f_playing=false; //whenever this function is run, all slideshow activity is stopped and therefore f_playing is false
updateStartStopText();
}
function delayInterval(){
//clear any delays and intervals to prevent multiple delays
clearTimeout(delayInt);
clearInterval(timer);
//only start the delay if the slideAction is set to continuous and the slideshow was playing before.
if(slideAction=="continuous" && f_playing==true){
delayInt=setTimeout("runInterval()",1000);
}
}
function startFade(){
//once this function starts, end any delays since the delay function has done its job.
clearTimeout(delayInt);
//array to collect indices of each image every time the slideshow runs
var zIndices=new Array();
//init variables to hold the top and bottom images.
var topImg;
var botImg;
//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;
}
if(zIndices[i]==0){
botImg=i;
}
}
if(slideAction=="previous"){
//Bring all images' z-indices down 1.
for(var i=0;i<numShowableImg;i++){
var prevIndex=Number(zIndices[i])-1;
$(".rotImg:eq("+i+")").css({"z-index":prevIndex});
//console.log(i+" "+$(".rotImg:eq("+i+")").css("z-index"));
}
$(".rotImg:eq("+botImg+")")
//Bring the bottom image to top at display:none,
.css({
"display":"none",
"z-index":(numShowableImg-1)
})
//Then fade in the now top image.
.fadeIn("slow");
} else if(slideAction=="individual click" || slideAction=="individual mouse over"){
//if an individual image link is selected
//check to see if the selected image is already the top image.
//if not, proceed. if it is, don't do anything.
if(selectedImageIndex!=topImg){
$(".rotImg:eq("+selectedImageIndex+")")
//place the selected image at the top of the stack and make it displaynone
.css({
"display":"none",
"z-index":numShowableImg
})
//then fade it in
.fadeIn("slow",function(){
//at callback, change all the z-indices behind the top image.
for(var i=0;i<numShowableImg;i++){
$(".rotImg:eq("+i+")").css({"z-index":newZis[i]});
}
});
}
//if the slideAction is mouse over, and the slideshow was playing, set the slideAction back to continuous
//if the slideAction is mouse over but slideshow wasn't playing, don't change slideAction
if(slideAction=="individual mouse over" && f_playing==true){
slideAction="continuous";
}
} else { //if slideAction is "continuous" or "next"
//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
for(var i=0;i<numShowableImg;i++){
var nextIndex=Number(zIndices[i])+1;
$(".rotImg:eq("+i+")").css({"z-index":nextIndex});
}
$(this).css({
"display":"block",
"z-index":"0"
});
});
}
//whatever happened in the fade, update the texts
updateStartStopText();
updateSlideActionText();
}
//update the texts when the page loads
updateStartStopText();
updateSlideActionText();