// // CSS Linked Photo Shuffler v1.1 by // Carl Camera // http://iamacamera.org // // SetOpacity Function and inpiration from Photo Fade by // Richard Rutter // http://clagnut.com // // License: Creative Commons Attribution 2.5 License // http://creativecommons.org/licenses/by/2.5/ // // Customize your photo shuffle settings // // * Surround the target with an anchor and
. // 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. // End Customization section var gblDeckSize = gblImg.length; var gblOpacity = 100; var gblOnDeck = 0; var gblStartImg; var gblStartHref; var gblImageRotations = gblDeckSize * (gblRotations+1); var direction = 0; //window.onload = photoShufflerLaunch; function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } 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 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); gblImageRotations = gblImg.length * (gblRotations+1); if ((direction==1) && (gblOpacity >=100)) { //change direction direction = 0; //pausecomp(2000); } else if ((direction==0) && (gblOpacity<=0)) { // shuffle to next photo photoShufflerShuffle(); direction = 1; // change direction } if (direction==0) { gblOpacity -= fadeDelta; setOpacity(theimg,gblOpacity); setTimeout("photoShufflerFade()",30); // 1/30th of a second } 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]; // set img opacity to 100 // shuffle the deck gblOnDeck = ++gblOnDeck % gblImg.length; // decrement rotation counter if (--gblImageRotations < 1) { // insert start/final image if we're done gblImg[gblOnDeck] = gblStartImg; gblHref[gblOnDeck] = gblStartHref; } theimg.src = gblImg[gblOnDeck]; theanchor.href = gblHref[gblOnDeck]; // 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; }