) that will serve as the image's container
var slideDuration = 4000; // duration (in milliseconds) that each slide will be visible
var fadeDuration = 1000; // duration (in milliseconds) for which each fade effect will last
// =====================================
// DO NOT TOUCH ANYTHING BELOW THIS LINE
// =====================================
var nextImage = 0; // index of the next-to-be displayed image
var images = new Array(); // array of the image URLs to use in the slideshow
var preloadedImg = new Image(); // reference to an object that pre-loads an image
var hSlideshowInt = 0; // handle to the timer interval ID given to the slideshow
var running = false; // set whether or not the slideshow is running
// add a new image to the array given its source
function _vpSlideshowAddImage(src)
{
images.push(src);
// pre-load the image
preloadedImg.src = src;
}
// start the slideshow
function _vpSlideshowStart()
{
// make sure there are actually images in the array
if(images.length > 0)
{
// set the images in the image viewport
document.getElementById("vpSlideshowContainer").innerHTML = "
![]("+images[0]+")
";
// set the window interval
hSlideshowInt = window.setInterval("_vpSlideshowNextImage()",slideDuration);
// let the script know the slideshow is running
running = true;
}
}
// stop the slideshow
function _vpSlideshowStop()
{
// clear the window interval
window.clearInterval(hSlideshowInt);
}
// internal function - cycle to the next image in the slideshow and display it
function _vpSlideshowNextImage()
{
// set the container background to the CURRENT image
//document.getElementById(containerObjID).style.background = "url('" + images[nextImage] + "')";
//document.getElementById(containerObjID).style.width = imgWidth;
//document.getElementById(containerObjID).style.height = imgHeight;
// increment the image index to process the next image
_vpSlideshowIncNextImageID();
// set the view image tag to the NEXT image
//document.getElementById("vpSlideshowContainer").style.display = "none";
// hide the view image tag so it can fade in
document.getElementById("vpSlideshowContainer").innerHTML = "
![]("+images[nextImage]+")
";
// fade in the view image tag if the interval has been set
if(running)
{
$("#" + vpSlideshowContainer).fadeIn(fadeDuration);
}
}
// internal function - figure out the index of the next image to receive
function _vpSlideshowIncNextImageID()
{
// make sure we don't go outside of the bounds of the images array
if(nextImage >= images.length - 1)
{
nextImage = 0;
}
else
{
// increment the index for the next image
nextImage++;
}
}