. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html
![]()
tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg;
var glbImgCondition = gup("p");
var url = location.href;
var dir = url.slice(8,url.length);
dir = dir.slice(dir.indexOf("/")+1,dir.length);
dir = dir.slice(0,dir.lastIndexOf("/"));
var webDir = dir;
var file = url.slice(url.lastIndexOf("/")+1, url.lastIndexOf("."));
//Image array for css slide show
switch(webDir)
{
case "rollup" :
gblImg = new Array("/i/rollup/rollup_11p.jpg",
"/i/rollup/rollup_05p.jpg",
"/i/rollup/rollup_09p.jpg",
"/i/rollup/rollup_18p.jpg",
"/i/rollup/rollup_19p.jpg",
"/i/rollup/rollup_03p.jpg");
if(file == "residential")
{
gblImg = new Array("/i/rollup/rollup_11p.jpg",
"/i/rollup/rollup_05p.jpg",
"/i/rollup/rollup_09p.jpg",
"/i/rollup/rollup_18p.jpg",
"/i/rollup/rollup_19p.jpg",
"/i/rollup/rollup_27p.jpg");
}
break;
case "shutters":
gblImg = new Array("/i/shutters/shutters_34p.jpg",
"/i/shutters/shutters_08p.jpg",
"/i/shutters/shutters_06p.jpg",
"/i/shutters/shutters_43p.jpg",
"/i/shutters/shutters_10fp.jpg",
"/i/shutters/shutters_07p.jpg");
break;
case "hardwoods":
gblImg = new Array("/i/shutters/shutters_08p.jpg",
"/i/hardwoods/drawerkit2SS.png",
"/i/shutters/shutters_43p.jpg",
"/i/hardwoods/countersectionsSS.png",
"/i/hardwoods/ergodesk2SS.png");
break;
case "elevator":
gblImg = new Array("/i/elevator/elev01.jpg",
"/i/elevator/elev02.jpg",
"/i/elevator/elev03.jpg",
"/i/elevator/elev04.jpg");
break;
case "accordion" :
switch(file)
{
case "residential" :
gblImg = new Array("/i/accordion/240/3300_19p.jpg",
"/i/accordion/140/140_04p.jpg",
"/i/accordion/240/240_05p.jpg",
"/i/accordion/140/140_02p.jpg",
"/i/accordion/140/140_03p.jpg",
"/i/accordion/220/220_01p.jpg");
break;
case "commercial" :
gblImg = new Array("/i/accordion/240/240_04p.jpg",
"/i/accordion/3300/3300_03p.jpg",
"/i/accordion/3300/3300_04p.jpg",
"/i/accordion/540/540_04p.jpg",
"/i/accordion/240m/240m_01p.jpg",
"/i/accordion/740/740_01p.jpg");
break;
case "acoustic" :
gblImg = new Array("/i/accordion/2100/2100_01p.jpg",
"/i/accordion/3300/3300_02p.jpg",
"/i/accordion/2100/2100_02p.jpg",
"/i/accordion/3300/3300_01p.jpg",
"/i/accordion/3300/3300_03p.jpg",
"/i/accordion/3300/3300_06p.jpg");
break;
case "security" :
gblImg = new Array("/i/accordion/240/240_02p.jpg",
"/i/accordion/440/440_03p.jpg",
"/i/accordion/440/440_02p.jpg",
"/i/accordion/640/640_04p.jpg",
"/i/accordion/640/640_03p.jpg",
"/i/accordion/440/440_01p.jpg");
break;
case "deco_options" :
gblImg = new Array("/i/accordion/deco_options/deco_options_02.jpg",
"/i/accordion/deco_options/deco_options_03.jpg",
"/i/accordion/deco_options/deco_options_01.jpg");
break;
case "index" :
default :
gblImg = new Array("/i/accordion/240/shuffler/240_13p.jpg",
"/i/accordion/440/440_01p.jpg",
"/i/accordion/3300/3300_04p.jpg",
"/i/accordion/3300/3300_03p.jpg",
"/i/accordion/220/220_01p.jpg",
"/i/accordion/240/shuffler/240_14p.jpg");
break;
}
break;
case "bookcase" :
gblImg = new Array("/i/bookcase/bookcase_02p.jpg",
"/i/bookcase/bookcase_03p.jpg",
"/i/bookcase/bookcase_04p.jpg",
"/i/bookcase/bookcase_05p.jpg",
"/i/bookcase/bookcase_06p.jpg",
"/i/bookcase/bookcase_07p.jpg",
"/i/bookcase/bookcase_08p.jpg",
"/i/bookcase/bookcase_09p.jpg",
"/i/bookcase/bookcase_10p.jpg",
"/i/bookcase/bookcase_01p.jpg");
break;
}
var gblPauseSeconds = 6.25;
var gblFadeSeconds = .95;
var gblRotations = 0;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
//Get URL Parameters
function gup(name)
{
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var tmpURL = window.location.href;
var results = regex.exec( tmpURL );
if( results == null ) {
return "";
}
else {
return results[1];
}
}
function photoShufflerLaunch()
{
//alert("photoShufflerLaunch");
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
//alert("gblOpacity="+gblOpacity+" || fadeDelta="+fadeDelta)
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
//alert("load image "+gblImg[gblOnDeck]);
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
//alert("load background image "+thediv.style.backgroundImage);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}