.
// specify unique id= in all three
// * The first and final photo displayed is in the html ![]()
tag
// * The image 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 Href array contains the link you want associated with each image
// each image must have a corresponding link.
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
// * For random images, set the 'sliderandom' variable to 1 for each
// individual slide
// * For more than 3 slideshows, copy the 'Duplication code' at the bottom
// of the page to the appropriate section. Next change the '$$' to the
// appropriate number. Ensure that each slide show has its own unique div.
var slideshow = 1; // Number of concurrent slideshows.
// ############### SECTION 1 ###############
// Slide 1
//------------------------------------
var gblPhotoShufflerDivId1 = "photodiv1";
var gblPhotoShufflerImgId1 = "photoimg1";
var gblPhotoShufflerAnchorId1 = "photoanchor1";
var sliderandom1 = 1; // rotate images randomly: 1 / rotate images in order: 0
var gblImg1 = new Array(
"../../images/splash1.jpg",
"../../images/splash2.jpg",
"../../images/splash3.jpg",
"../../images/splash4.jpg",
"../../images/splash5.jpg"
);
var gblHref1 = new Array();
var gblPauseSeconds1 = 7.25;
var gblFadeSeconds1 = .85;
var gblRotations1 = 999999;
// Slide 2
//------------------------------------
var gblPhotoShufflerDivId2 = "photodiv2";
var gblPhotoShufflerImgId2 = "photoimg2";
var gblPhotoShufflerAnchorId2 = "photoanchor2";
var sliderandom2 = 1; // rotate images randomly: 1 / rotate images in order: 0
var gblImg2 = new Array(
"../../images/IMAGE2.jpg",
"../../images/IMAGE3.jpg",
"../../images/IMAGE4.jpg",
"../../images/IMAGE5.jpg",
"../../images/IMAGE1.jpg"
);
var gblHref2 = new Array(
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com"
);
var gblPauseSeconds2 = 7.25;
var gblFadeSeconds2 = .85;
var gblRotations2 = 999999;
// Slide 3
//------------------------------------
var gblPhotoShufflerDivId3 = "photodiv3";
var gblPhotoShufflerImgId3 = "photoimg3";
var gblPhotoShufflerAnchorId3 = "photoanchor3";
var sliderandom3 = 1; // rotate images randomly: 1 / rotate images in order: 0
var gblImg3 = new Array(
"../../images/IMAGE2.jpg",
"../../images/IMAGE3.jpg",
"../../images/IMAGE4.jpg",
"../../images/IMAGE5.jpg",
"../../images/IMAGE1.jpg"
);
var gblHref3 = new Array(
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com"
);
var gblPauseSeconds3 = 7.25;
var gblFadeSeconds3 = .85;
var gblRotations3 = 999999;
// ############### SECTION 2 ###############
// End Customization section
// Other Global Variables
var rand1 = new Array();
var tmpImg1 = new Array();
var tmpHref1 = new Array();
var tmpgblImg1 = new Array();
var tmpgblHref1 = new Array();
var gblDeckSize1 = gblImg1.length;
var gblOpacity1 = 100;
var gblOnDeck1 = 0;
var gblStartImg1;
var gblStartHref1;
var gblImageRotations1 = gblDeckSize1 * (gblRotations1+1);
var rand2 = new Array();
var tmpImg2 = new Array();
var tmpHref2 = new Array();
var tmpgblImg2 = new Array();
var tmpgblHref2 = new Array();
var gblDeckSize2 = gblImg1.length;
var gblOpacity2 = 100;
var gblOnDeck2 = 0;
var gblStartImg2;
var gblStartHref2;
var gblImageRotations2 = gblDeckSize2 * (gblRotations2+1);
var rand3 = new Array();
var tmpImg3 = new Array();
var tmpHref3 = new Array();
var tmpgblImg3 = new Array();
var tmpgblHref3 = new Array();
var gblDeckSize3 = gblImg1.length;
var gblOpacity3 = 100;
var gblOnDeck3 = 0;
var gblStartImg3;
var gblStartHref3;
var gblImageRotations3 = gblDeckSize3 * (gblRotations3+1);
// ############### SECTION 3 ###############
window.onload = initPage;
function initPage()
{
switch (slideshow){
case 1:
photoShufflerLaunch1();
break
case 2:
photoShufflerLaunch1();
photoShufflerLaunch2();
break
case 3:
photoShufflerLaunch1();
photoShufflerLaunch2();
photoShufflerLaunch3();
break
}
}
// ############### SECTION 4 ###############
function photoShufflerLaunch1()
{
if (sliderandom1 == 1) {
tmpImg1 = gblImg1.slice(0);
tmpHref1 = gblHref1.slice(0);
for (var i1=0; i1 < gblImg1.length; i1++){
rand1[i1] = i1;
}
rand1.sort( randOrd );
//alert ("Random Array: "+rand1[0]+", "+rand1[1]+", "+rand1[2]+", "+rand1[3]+", "+rand1[4]+", "+rand1[5])
for (var i1=0; i1 < gblImg1.length; i1++){
gblImg1[i1] = tmpImg1[rand1[i1]];
gblHref1[i1] = tmpHref1[rand1[i1]];
}
//alert ("Actual Array: "+gblHref1[0]+", "+gblHref1[1]+", "+gblHref1[2]+", "+gblHref1[3]+", "+gblHref1[4]+", "+gblHref1[5])
}
var theimg1 = document.getElementById(gblPhotoShufflerImgId1);
gblStartImg1 = theimg1.src; // save away to show as final image
var theanchor1 = document.getElementById(gblPhotoShufflerAnchorId1);
gblStartHref1 = theimg1.href; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId1).style.backgroundImage='url(' + gblImg1[gblOnDeck1] + ')';
setTimeout("photoShufflerFade1()",gblPauseSeconds1*1000);
}
function photoShufflerFade1()
{
var theimg1 = document.getElementById(gblPhotoShufflerImgId1);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta1 = 100 / (30 * gblFadeSeconds1);
// fade top out to reveal bottom image
if (gblOpacity1 < 2*fadeDelta1 )
{
gblOpacity1 = 100;
// stop the rotation if we're done
if (gblImageRotations1 < 1) return;
photoShufflerShuffle1();
// pause before next fade
setTimeout("photoShufflerFade1()",gblPauseSeconds1*1000);
}
else
{
gblOpacity1 -= fadeDelta1;
setOpacity(theimg1,gblOpacity1);
setTimeout("photoShufflerFade1()",30); // 1/30th of a second
}
}
function photoShufflerShuffle1()
{
var thediv1 = document.getElementById(gblPhotoShufflerDivId1);
var theimg1 = document.getElementById(gblPhotoShufflerImgId1);
var theanchor1 = document.getElementById(gblPhotoShufflerAnchorId1);
// copy div background-image to img.src
theimg1.src = gblImg1[gblOnDeck1];
theanchor1.href = gblHref1[gblOnDeck1];
window.status = gblHref1[gblOnDeck1]; // updates status bar (optional)
// set img opacity to 100
setOpacity(theimg1,100);
// shuffle the deck
gblOnDeck1 = ++gblOnDeck1 % gblDeckSize1;
// decrement rotation counter
if (--gblImageRotations1 < 1)
{
// insert start/final image if we're done
gblImg1[gblOnDeck1] = gblStartImg1;
gblHref1[gblOnDeck1] = gblStartHref1;
}
// slide next image underneath
thediv1.style.backgroundImage='url(' + gblImg1[gblOnDeck1] + ')';
}
function photoShufflerLaunch2()
{
if (sliderandom2 == 1) {
tmpImg2 = gblImg2.slice(0);
tmpHref2 = gblHref2.slice(0);
for (var i2=0; i2 < gblImg2.length; i2++){
rand2[i2] = i2;
}
rand2.sort( randOrd );
//alert ("Random Array: "+rand2[0]+", "+rand2[1]+", "+rand2[2]+", "+rand2[3]+", "+rand2[4]+", "+rand2[5])
for (var i2=0; i2 < gblImg2.length; i2++){
gblImg2[i2] = tmpImg2[rand2[i2]];
gblHref2[i2] = tmpHref2[rand2[i2]];
}
//alert ("Actual Array: "+gblHref2[0]+", "+gblHref2[1]+", "+gblHref2[2]+", "+gblHref2[3]+", "+gblHref2[4]+", "+gblHref2[5])
}
var theimg2 = document.getElementById(gblPhotoShufflerImgId2);
gblStartImg2 = theimg2.src; // save away to show as final image
var theanchor2 = document.getElementById(gblPhotoShufflerAnchorId2);
gblStartHref2 = theimg2.href; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId2).style.backgroundImage='url(' + gblImg2[gblOnDeck2] + ')';
setTimeout("photoShufflerFade2()",gblPauseSeconds2*1000);
}
function photoShufflerFade2()
{
var theimg2 = document.getElementById(gblPhotoShufflerImgId2);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta2 = 100 / (30 * gblFadeSeconds2);
// fade top out to reveal bottom image
if (gblOpacity2 < 2*fadeDelta2 )
{
gblOpacity2 = 100;
// stop the rotation if we're done
if (gblImageRotations2 < 1) return;
photoShufflerShuffle2();
// pause before next fade
setTimeout("photoShufflerFade2()",gblPauseSeconds2*1000);
}
else
{
gblOpacity2 -= fadeDelta2;
setOpacity(theimg2,gblOpacity2);
setTimeout("photoShufflerFade2()",30); // 1/30th of a second
}
}
function photoShufflerShuffle2()
{
var thediv2 = document.getElementById(gblPhotoShufflerDivId2);
var theimg2 = document.getElementById(gblPhotoShufflerImgId2);
var theanchor2 = document.getElementById(gblPhotoShufflerAnchorId2);
// copy div background-image to img.src
theimg2.src = gblImg2[gblOnDeck2];
theanchor2.href = gblHref2[gblOnDeck2];
window.status = gblHref2[gblOnDeck2]; // updates status bar (optional)
// set img opacity to 100
setOpacity(theimg2,100);
// shuffle the deck
gblOnDeck2 = ++gblOnDeck2 % gblDeckSize2;
// decrement rotation counter
if (--gblImageRotations2 < 1)
{
// insert start/final image if we're done
gblImg2[gblOnDeck2] = gblStartImg2;
gblHref2[gblOnDeck2] = gblStartHref2;
}
// slide next image underneath
thediv2.style.backgroundImage='url(' + gblImg2[gblOnDeck2] + ')';
}
function photoShufflerLaunch3()
{
if (sliderandom3 == 1) {
tmpImg3 = gblImg3.slice(0);
tmpHref3 = gblHref3.slice(0);
for (var i3=0; i3 < gblImg3.length; i3++){
rand3[i3] = i3;
}
rand3.sort( randOrd );
//alert ("Random Array: "+rand3[0]+", "+rand3[1]+", "+rand3[2]+", "+rand3[3]+", "+rand3[4]+", "+rand3[5])
for (var i3=0; i3 < gblImg3.length; i3++){
gblImg3[i3] = tmpImg3[rand3[i3]];
gblHref3[i3] = tmpHref3[rand3[i3]];
}
//alert ("Actual Array: "+gblHref3[0]+", "+gblHref3[1]+", "+gblHref3[2]+", "+gblHref3[3]+", "+gblHref3[4]+", "+gblHref3[5])
}
var theimg3 = document.getElementById(gblPhotoShufflerImgId3);
gblStartImg3 = theimg3.src; // save away to show as final image
var theanchor3 = document.getElementById(gblPhotoShufflerAnchorId3);
gblStartHref3 = theimg3.href; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId3).style.backgroundImage='url(' + gblImg3[gblOnDeck3] + ')';
setTimeout("photoShufflerFade3()",gblPauseSeconds3*1000);
}
function photoShufflerFade3()
{
var theimg3 = document.getElementById(gblPhotoShufflerImgId3);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta3 = 100 / (30 * gblFadeSeconds3);
// fade top out to reveal bottom image
if (gblOpacity3 < 2*fadeDelta3 )
{
gblOpacity3 = 100;
// stop the rotation if we're done
if (gblImageRotations3 < 1) return;
photoShufflerShuffle3();
// pause before next fade
setTimeout("photoShufflerFade3()",gblPauseSeconds3*1000);
}
else
{
gblOpacity3 -= fadeDelta3;
setOpacity(theimg3,gblOpacity3);
setTimeout("photoShufflerFade3()",30); // 1/30th of a second
}
}
function photoShufflerShuffle3()
{
var thediv3 = document.getElementById(gblPhotoShufflerDivId3);
var theimg3 = document.getElementById(gblPhotoShufflerImgId3);
var theanchor3 = document.getElementById(gblPhotoShufflerAnchorId3);
// copy div background-image to img.src
theimg3.src = gblImg3[gblOnDeck3];
theanchor3.href = gblHref3[gblOnDeck3];
window.status = gblHref3[gblOnDeck3]; // updates status bar (optional)
// set img opacity to 100
setOpacity(theimg3,100);
// shuffle the deck
gblOnDeck3 = ++gblOnDeck3 % gblDeckSize3;
// decrement rotation counter
if (--gblImageRotations3 < 1)
{
// insert start/final image if we're done
gblImg3[gblOnDeck3] = gblStartImg3;
gblHref3[gblOnDeck3] = gblStartHref3;
}
// slide next image underneath
thediv3.style.backgroundImage='url(' + gblImg3[gblOnDeck3] + ')';
}
function randOrd(){return (Math.round(Math.random())-0.5); }
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;
}
//############## DUPLICATION CODE FOR ADDITIONAL SHOWS ##############
/*// ############### SECTION 1 ###############
// Slide $$
//------------------------------------
var gblPhotoShufflerDivId$$ = "photodiv$$";
var gblPhotoShufflerImgId$$ = "photoimg$$";
var gblPhotoShufflerAnchorId$$ = "photoanchor$$";
var sliderandom$$ = 1;
var gblImg$$ = new Array(
"../../images/IMAGE2.jpg",
"../../images/IMAGE3.jpg",
"../../images/IMAGE4.jpg",
"../../images/IMAGE5.jpg",
"../../images/IMAGE1.jpg"
);
var gblHref$$ = new Array(
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com",
"www.URL.com"
);
var gblPauseSeconds$$ = 7.25;
var gblFadeSeconds$$ = .85;
var gblRotations$$ = 999999;*/
/*// ############### SECTION 2 ###############
var rand$$ = new Array();
var tmpImg$$ = new Array();
var tmpHref$$ = new Array();
var tmpgblImg$$ = new Array();
var tmpgblHref$$ = new Array();
var gblDeckSize$$ = gblImg1.length;
var gblOpacity$$ = 100;
var gblOnDeck$$ = 0;
var gblStartImg$$;
var gblStartHref$$;
var gblImageRotations$$ = gblDeckSize$$ * (gblRotations$$+1);*/
/*// ############### SECTION 4 ###############
function photoShufflerLaunch$$()
{
if (sliderandom$$ == 1) {
tmpImg$$ = gblImg$$.slice(0);
tmpHref$$ = gblHref$$.slice(0);
for (var i$$=0; i$$ < gblImg$$.length; i$$++){
rand$$[i$$] = i$$;
}
rand$$.sort( randOrd );
//alert ("Random Array: "+rand$$[0]+", "+rand$$[1]+", "+rand$$[2]+", "+rand$$[3]+", "+rand$$[4]+", "+rand$$[5])
for (var i$$=0; i$$ < gblImg$$.length; i$$++){
gblImg$$[i$$] = tmpImg$$[rand$$[i$$]];
gblHref$$[i$$] = tmpHref$$[rand$$[i$$]];
}
//alert ("Actual Array: "+gblHref$$[0]+", "+gblHref$$[1]+", "+gblHref$$[2]+", "+gblHref$$[3]+", "+gblHref$$[4]+", "+gblHref$$[5])
}
var theimg$$ = document.getElementById(gblPhotoShufflerImgId$$);
gblStartImg$$ = theimg$$.src; // save away to show as final image
var theanchor$$ = document.getElementById(gblPhotoShufflerAnchorId$$);
gblStartHref$$ = theimg$$.href; // 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$$);
// 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$$);
var theanchor$$ = document.getElementById(gblPhotoShufflerAnchorId$$);
// copy div background-image to img.src
theimg$$.src = gblImg$$[gblOnDeck$$];
theanchor$$.href = gblHref$$[gblOnDeck$$];
window.status = gblHref$$[gblOnDeck$$]; // updates status bar (optional)
// 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$$;
gblHref$$[gblOnDeck$$] = gblStartHref$$;
}
// slide next image underneath
thediv$$.style.backgroundImage='url(' + gblImg$$[gblOnDeck$$] + ')';
}*/