. 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 = new Array(3);
var gblPauseSeconds = 2.25;
var gblFadeSeconds = .55;
var gblRotations = 0;
var gblTimerId;
// End Customization section
var gblDeckSize;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblDefaultImg;
var gblClearImg = "/assets/images/_top_js/header_clear.gif" ;
var gblImageRotations;
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var today=new Date();
var month=today.getMonth()+1;
gblImg = new Array(13);
gblOnDeck = 0;
if( month == 12 || month == 1 || month == 2) {
gblImg[0] = "/assets/images/_top_js/winter/winter01.jpg";
gblImg[1] = "/assets/images/_top_js/winter/winter02.jpg";
gblImg[2] = "/assets/images/_top_js/winter/winter03.jpg";
gblImg[3] = "/assets/images/_top_js/winter/winter04.jpg";
gblImg[4] = "/assets/images/_top_js/winter/winter05.jpg";
gblImg[5] = "/assets/images/_top_js/winter/winter06.jpg";
gblImg[6] = "/assets/images/_top_js/winter/winter07.jpg";
gblImg[7] = "/assets/images/_top_js/winter/winter08.jpg";
gblImg[8] = "/assets/images/_top_js/winter/winter09.jpg";
gblImg[9] = "/assets/images/_top_js/winter/winter10.jpg";
gblImg[10] = "/assets/images/_top_js/winter/winter11.jpg";
gblImg[11] = "/assets/images/_top_js/winter/winter12.jpg";
gblImg[12] = "/assets/images/_top_js/winter/winter13.jpg";
gblImg[13] = "/assets/images/_top_js/winter/winter14.jpg";
} else if (month == 3 || month == 4 || month == 5) {
gblImg[0] = "/assets/images/_top_js/spring/spring01.jpg";
gblImg[1] = "/assets/images/_top_js/spring/spring02.jpg";
gblImg[2] = "/assets/images/_top_js/spring/spring03.jpg";
gblImg[3] = "/assets/images/_top_js/spring/spring04.jpg";
gblImg[4] = "/assets/images/_top_js/spring/spring05.jpg";
gblImg[5] = "/assets/images/_top_js/spring/spring06.jpg";
gblImg[6] = "/assets/images/_top_js/spring/spring07.jpg";
gblImg[7] = "/assets/images/_top_js/spring/spring08.jpg";
gblImg[8] = "/assets/images/_top_js/spring/spring09.jpg";
gblImg[9] = "/assets/images/_top_js/spring/spring10.jpg";
gblImg[10] = "/assets/images/_top_js/spring/spring11.jpg";
gblImg[11] = "/assets/images/_top_js/spring/spring12.jpg";
gblImg[12] = "/assets/images/_top_js/spring/spring13.jpg";
gblImg[13] = "/assets/images/_top_js/spring/spring14.jpg";
} else if (month == 6 || month == 7 || month == 8) {
gblImg[0] = "/assets/images/_top_js/summer/summer01.jpg";
gblImg[1] = "/assets/images/_top_js/summer/summer02.jpg";
gblImg[2] = "/assets/images/_top_js/summer/summer03.jpg";
gblImg[3] = "/assets/images/_top_js/summer/summer04.jpg";
gblImg[4] = "/assets/images/_top_js/summer/summer05.jpg";
gblImg[5] = "/assets/images/_top_js/summer/summer06.jpg";
gblImg[6] = "/assets/images/_top_js/summer/summer07.jpg";
gblImg[7] = "/assets/images/_top_js/summer/summer08.jpg";
gblImg[8] = "/assets/images/_top_js/summer/summer09.jpg";
gblImg[9] = "/assets/images/_top_js/summer/summer10.jpg";
gblImg[10] = "/assets/images/_top_js/summer/summer11.jpg";
gblImg[11] = "/assets/images/_top_js/summer/summer12.jpg";
gblImg[12] = "/assets/images/_top_js/summer/summer13.jpg";
gblImg[13] = "/assets/images/_top_js/summer/summer14.jpg";
} else {
gblImg[0] = "/assets/images/_top_js/autumn/autumn01.jpg";
gblImg[1] = "/assets/images/_top_js/autumn/autumn02.jpg";
gblImg[2] = "/assets/images/_top_js/autumn/autumn03.jpg";
gblImg[3] = "/assets/images/_top_js/autumn/autumn04.jpg";
gblImg[4] = "/assets/images/_top_js/autumn/autumn05.jpg";
gblImg[5] = "/assets/images/_top_js/autumn/autumn06.jpg";
gblImg[6] = "/assets/images/_top_js/autumn/autumn07.jpg";
gblImg[7] = "/assets/images/_top_js/autumn/autumn08.jpg";
gblImg[8] = "/assets/images/_top_js/autumn/autumn09.jpg";
gblImg[9] = "/assets/images/_top_js/autumn/autumn10.jpg";
gblImg[10] = "/assets/images/_top_js/autumn/autumn11.jpg";
gblImg[11] = "/assets/images/_top_js/autumn/autumn12.jpg";
gblImg[12] = "/assets/images/_top_js/autumn/autumn13.jpg";
gblImg[13] = "/assets/images/_top_js/autumn/autumn14.jpg";
}
gblDeckSize = gblImg.length;
gblImageRotations = gblDeckSize * (gblRotations+1);
gblStartImg = gblImg[0].src;
//default image
gblDefaultImg = document.getElementById(gblPhotoShufflerImgId).src;
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
gblTimerId = setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function chgImg(Season)
{
clearTimeout(gblTimerId);
gblImg = new Array(3);
gblOnDeck = 0;
switch (Season){
case "spring":
gblImg[0] = "/assets/images/_top_js/spring/spring01.jpg";
gblImg[1] = "/assets/images/_top_js/spring/spring02.jpg";
gblImg[2] = "/assets/images/_top_js/spring/spring03.jpg";
gblImg[3] = "/assets/images/_top_js/spring/spring04.jpg";
gblImg[4] = "/assets/images/_top_js/spring/spring05.jpg";
gblImg[5] = "/assets/images/_top_js/spring/spring06.jpg";
gblImg[6] = "/assets/images/_top_js/spring/spring07.jpg";
gblImg[7] = "/assets/images/_top_js/spring/spring08.jpg";
gblImg[8] = "/assets/images/_top_js/spring/spring09.jpg";
gblImg[9] = "/assets/images/_top_js/spring/spring10.jpg";
gblImg[10] = "/assets/images/_top_js/spring/spring11.jpg";
gblImg[11] = "/assets/images/_top_js/spring/spring12.jpg";
gblImg[12] = "/assets/images/_top_js/spring/spring13.jpg";
gblImg[13] = "/assets/images/_top_js/spring/spring14.jpg";
break;
case "summer":
gblImg[0] = "/assets/images/_top_js/summer/summer01.jpg";
gblImg[1] = "/assets/images/_top_js/summer/summer02.jpg";
gblImg[2] = "/assets/images/_top_js/summer/summer03.jpg";
gblImg[3] = "/assets/images/_top_js/summer/summer04.jpg";
gblImg[4] = "/assets/images/_top_js/summer/summer05.jpg";
gblImg[5] = "/assets/images/_top_js/summer/summer06.jpg";
gblImg[6] = "/assets/images/_top_js/summer/summer07.jpg";
gblImg[7] = "/assets/images/_top_js/summer/summer08.jpg";
gblImg[8] = "/assets/images/_top_js/summer/summer09.jpg";
gblImg[9] = "/assets/images/_top_js/summer/summer10.jpg";
gblImg[10] = "/assets/images/_top_js/summer/summer11.jpg";
gblImg[11] = "/assets/images/_top_js/summer/summer12.jpg";
gblImg[12] = "/assets/images/_top_js/summer/summer13.jpg";
gblImg[13] = "/assets/images/_top_js/summer/summer14.jpg";
break;
case "autumn":
gblImg[0] = "/assets/images/_top_js/autumn/autumn01.jpg";
gblImg[1] = "/assets/images/_top_js/autumn/autumn02.jpg";
gblImg[2] = "/assets/images/_top_js/autumn/autumn03.jpg";
gblImg[3] = "/assets/images/_top_js/autumn/autumn04.jpg";
gblImg[4] = "/assets/images/_top_js/autumn/autumn05.jpg";
gblImg[5] = "/assets/images/_top_js/autumn/autumn06.jpg";
gblImg[6] = "/assets/images/_top_js/autumn/autumn07.jpg";
gblImg[7] = "/assets/images/_top_js/autumn/autumn08.jpg";
gblImg[8] = "/assets/images/_top_js/autumn/autumn09.jpg";
gblImg[9] = "/assets/images/_top_js/autumn/autumn10.jpg";
gblImg[10] = "/assets/images/_top_js/autumn/autumn11.jpg";
gblImg[11] = "/assets/images/_top_js/autumn/autumn12.jpg";
gblImg[12] = "/assets/images/_top_js/autumn/autumn13.jpg";
gblImg[13] = "/assets/images/_top_js/autumn/autumn14.jpg";
break;
case "winter":
gblImg[0] = "/assets/images/_top_js/winter/winter01.jpg";
gblImg[1] = "/assets/images/_top_js/winter/winter02.jpg";
gblImg[2] = "/assets/images/_top_js/winter/winter03.jpg";
gblImg[3] = "/assets/images/_top_js/winter/winter04.jpg";
gblImg[4] = "/assets/images/_top_js/winter/winter05.jpg";
gblImg[5] = "/assets/images/_top_js/winter/winter06.jpg";
gblImg[6] = "/assets/images/_top_js/winter/winter07.jpg";
gblImg[7] = "/assets/images/_top_js/winter/winter08.jpg";
gblImg[8] = "/assets/images/_top_js/winter/winter09.jpg";
gblImg[9] = "/assets/images/_top_js/winter/winter10.jpg";
gblImg[10] = "/assets/images/_top_js/winter/winter11.jpg";
gblImg[11] = "/assets/images/_top_js/winter/winter12.jpg";
gblImg[12] = "/assets/images/_top_js/winter/winter13.jpg";
gblImg[13] = "/assets/images/_top_js/winter/winter14.jpg";
break;
}
gblDeckSize = gblImg.length;
gblImageRotations = gblDeckSize * (gblRotations+1);
gblStartImg = gblImg[0].src;
document.getElementById(gblPhotoShufflerImgId).src = gblClearImg;
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
gblTimerId = setTimeout("photoShufflerFade()",gblPauseSeconds*500);
}
function photoShufflerFade()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
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
//set default image
if (gblImageRotations < 1)
{
clearTimeout(gblTimerId);
return;
};
photoShufflerShuffle();
// pause before next fade
gblTimerId = setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
gblTimerId = setTimeout("photoShufflerFade()",30);
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = 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] = gblDefaultImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
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;
}