// The opacity level of the picture; starts at 100, so it's completely opaque
var Opacity = 100;
// The picture we're currently displaying, which starts at the fourth picture
// (recall that the array is 0-based, so 3 is the fourth picture)
var PicIndex = 3;
// The number of seconds to show each picture as completely opaque
var DisplayTime = 2;
// The number of seconds to display the initial picture
var InitTime = 1;
// The number to increment/decrement the opacity by each time--this controls
// how fast it fades in/out
var FadeStep = 5;
// Create an array of images to choose from
var imgArray = new Array("slide1.jpg",
"slide2.jpg",
"slide3.jpg",
"slide4.jpg",
"slide5.jpg",
"slide6.jpg",
"slide7.jpg",
"slide8.jpg");
function viewLargeImage(imgSKU) {
previewWindow = window.open("blank.html", "preview", "width=440,height=640,resizable=0,scrollbars=0,location=0,directories=0,status=0,menubar=0,copyhistory=0,left=350,top=250");
previewWindow.moveTo(350,250);
previewWindow.document.writeln("");
previewWindow.document.writeln("");
previewWindow.document.writeln("");
previewWindow.document.writeln("Full view");
previewWindow.document.writeln("");
previewWindow.document.writeln("");
previewWindow.document.writeln("");
previewWindow.document.writeln("Preview");
previewWindow.document.writeln("
");
previewWindow.document.writeln("");
previewWindow.document.writeln(" Close window");
previewWindow.document.writeln("
");
previewWindow.document.writeln("");
previewWindow.document.writeln("");
previewWindow.document.close();
}
/**
This function is what is called on startup to begin the slideshow
*/
function beginSlideshow() {
// Let the current picture stay there for a bit, then fade it out
setTimeout("fadeOut()", InitTime * 1000);
// Begin preloading images now
// Create an array to store each slideshow image in as we preload it
var preloadArray = new Array();
// Go through the entire slideshow array
for( var i = 0; i < imgArray.length; i++ ){
// Create an image and store it in the preloadArray
preloadArray[i] = new Image;
// Set the source to be the next image in the slideshow array, which
// will load the image. We start with (PicIndex + 1) so that we
// first preload the image immediately after the first one shown.
preloadArray[i].src = "slides/" + imgArray[(i + PicIndex + 1) % imgArray.length];
}
}
/**
This function will fade in the current image in the
slideshow.
*/
function fadeIn() {
// Increment the opacity index
Opacity += FadeStep;
// Set the opacity to the current level of the opacity index.
// In Mozilla Firefox, you do this by setting the CSS element
// "MozOpacity"
// In CSS3, you do this by setting the CSS element "opacity"
// In Internet Explorer, you do this by setting the proprietary
// filter "alpha.opacity". These are mutually exclusive,
// so only do the latter if we're using IE
document.all.slideshow.style.MozOpacity = Opacity * 0.01;
document.all.slideshow.style.KhtmlOpacity = Opacity * 0.01;
document.all.slideshow.style.opacity = Opacity * 0.01;
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ) {
document.all.slideshow.filters.alpha.opacity = Opacity;
}
// If it's not totally opaque yet, then call this function again
// in .1 seconds
if( Opacity < 100 ) {
setTimeout("fadeIn()", 100);
}else{
// Otherwise, it's totally opaque, so begin fading out after a bit
setTimeout("fadeOut()", DisplayTime * 1000);
}
}
/**
This function returns a random number between 0 and "length"
*/
function randomnumber( length ) {
var randscript = -1;
while( ((randscript < 0) || (randscript >= length)) || isNaN(randscript) ){
randscript = parseInt(Math.random() * (length+1) );
}
return randscript;
}
/**
This function searches the current document for an image with
the name element "imgname", and returns it if it's there. If
it's not there, the function returns false.
*/
function findImage( imgname ) {
// Get an array of the images in the document
var imgarray = document.images;
// Get the length of the array
var length = imgarray.length;
var i = 0;
// Go through every image in the array
for( i = 0; i < length; i++ ) {
// If this image is the one we're searching for, return it
if( imgarray[i].name == imgname ) {
return imgarray[i];
}
}
// We didn't find it, so return false
return (false);
}
/**
This function will swap out the current image in the
slideshow with a random image
*/
function swap() {
// Get the length of the array
var howMany = imgArray.length;
// Get the slideshow image in the document
var theImage = findImage("slideshowpic");
// If we succeeded in getting the image...
if (theImage) {
// ...then change the picture to the next one in the array
PicIndex = (PicIndex + 1) % howMany;
theImage.src = "slides/" + imgArray[PicIndex];
}
}
/**
This function will fade out the current image in the
slideshow.
*/
function fadeOut() {
// Decrement the opacity index
Opacity -= FadeStep;
// Set the opacity to the current level of the opacity index.
// In Mozilla Firefox, you do this by setting the CSS element
// "MozOpacity"
// In CSS3, you do this by setting the CSS element "opacity"
// In Internet Explorer, you do this by setting the proprietary
// filter "alpha.opacity". These are mutually exclusive,
// so only do the latter if we're using IE
document.all.slideshow.style.MozOpacity = Opacity * 0.01;
document.all.slideshow.style.KhtmlOpacity = Opacity * 0.01;
document.all.slideshow.style.opacity = Opacity * 0.01;
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ) {
document.all.slideshow.filters.alpha.opacity = Opacity;
}
// If it's not invisible yet, then call this function again
// in .1 seconds
if( Opacity > 0 ) {
setTimeout("fadeOut()", 100);
}else{
// Otherwise, it's totally invisible, so swap it out with
// a new image, and then fade that image in again
swap();
fadeIn();
}
}