.
// 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.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblPhotoShufflerAnchorId = "photoanchor";
var gblImg = new Array(25);
gblImg[0] = "/mlab/random_img/img_2415.jpg";
gblImg[1] = "/mlab/random_img/img_2421.jpg";
gblImg[2] = "/mlab/random_img/img_2425.jpg";
gblImg[3] = "/mlab/random_img/img_2426.jpg";
gblImg[4] = "/mlab/random_img/img_2433.jpg";
gblImg[5] = "/mlab/random_img/img_2435.jpg";
gblImg[6] = "/mlab/random_img/img_2442.jpg";
gblImg[7] = "/mlab/random_img/img_2448.jpg";
gblImg[8] = "/mlab/random_img/img_2453.jpg";
gblImg[9] = "/mlab/random_img/img_2458.jpg";
gblImg[10] = "/mlab/random_img/img_8940.jpg";
gblImg[11] = "/mlab/random_img/img_8941.jpg";
gblImg[12] = "/mlab/random_img/img_8950.jpg";
gblImg[13] = "/mlab/random_img/img_8952.jpg";
gblImg[14] = "/mlab/random_img/img_8956.jpg";
gblImg[15] = "/mlab/random_img/img_8957.jpg";
gblImg[16] = "/mlab/random_img/img_8959.jpg";
gblImg[17] = "/mlab/random_img/img_8961.jpg";
gblImg[18] = "/mlab/random_img/img_8962.jpg";
gblImg[19] = "/mlab/random_img/img_8963.jpg";
gblImg[20] = "/mlab/random_img/img_8964.jpg";
gblImg[21] = "/mlab/random_img/img_8967.jpg";
gblImg[22] = "/mlab/random_img/img_8970.jpg";
gblImg[23] = "/mlab/random_img/img_9075.jpg";
gblImg[24] = "/mlab/random_img/img_9077.jpg";
var gblHref = new Array(25);
gblHref[0] = "/photos/20061227/img_2415.jpg";
gblHref[1] = "/photos/20061227/img_2421.jpg";
gblHref[2] = "/photos/20061227/img_2425.jpg";
gblHref[3] = "/photos/20061227/img_2426.jpg";
gblHref[4] = "/photos/20061227/img_2433.jpg";
gblHref[5] = "/photos/20061227/img_2435.jpg";
gblHref[6] = "/photos/20061227/img_2442.jpg";
gblHref[7] = "/photos/20061227/img_2448.jpg";
gblHref[8] = "/photos/20061227/img_2453.jpg";
gblHref[9] = "/photos/20061227/img_2458.jpg";
gblHref[10] = "/photos/20061021/img_8940.jpg";
gblHref[11] = "/photos/20061021/img_8941.jpg";
gblHref[12] = "/photos/20061021/img_8950.jpg";
gblHref[13] = "/photos/20061021/img_8952.jpg";
gblHref[14] = "/photos/20061021/img_8956.jpg";
gblHref[15] = "/photos/20061021/img_8957.jpg";
gblHref[16] = "/photos/20061021/img_8959.jpg";
gblHref[17] = "/photos/20061021/img_8961.jpg";
gblHref[18] = "/photos/20061021/img_8962.jpg";
gblHref[19] = "/photos/20061021/img_8963.jpg";
gblHref[20] = "/photos/20061021/img_8964.jpg";
gblHref[21] = "/photos/20061021/img_8967.jpg";
gblHref[22] = "/photos/20061021/img_8970.jpg";
gblHref[23] = "/photos/20061021/img_9075.jpg";
gblHref[24] = "/photos/20061021/img_9077.jpg";
var gblPauseSeconds = 5.25;
var gblFadeSeconds = .85;
var gblRotations = 100;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = Math.floor(Math.random() * gblImg.length);//0;
var gblStartImg;
var gblStartHref;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
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] + ')';
}
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;
}