/* * Original from: http://brainerror.net/scripts/javascript/blendtrans/demo.html * * Edits by ASC: * - Removed unnecessary OO code that caused MSIE to choke * - Added pause between setting bg image and setting opacity to zero to * prevent MSIE image flash * - Increased opacity check argument to 103 for completely smooth fade * */ //find next image function nextImage(o) {// alert("nextImage(o)"); // o = current image do o = o.nextSibling; while(o && o.tagName != 'IMG'); return o; } //find first image inside an element function firstChildImage(o) {// alert("firstChildImage(o)"); // o = image.parentNode or document.getElementById(id) both are the parent div. o = o.firstChild; while(o && o.tagName != 'IMG') { o = o.nextSibling; } return o; } //set the opacity of an element to a specified value function setOpacity(obj, o) { // alert("setOpacity(obj, o)"); // obj = current image, for continueFadeImage o = 0 (zero) for fadeImage o = variable. obj.style.opacity = (o / 100); obj.style.MozOpacity = (o / 100); obj.style.KhtmlOpacity = (o / 100); obj.style.filter = 'alpha(opacity=' + o + ')'; } //set default values for parameters and starting image function blendImages(id, speed, pause, caption) { //alert("blendImages(id, speed, pause, caption)"); /* for testing id="blendme", speed=40, pause=550, caption="caption2" id = the value of the id of the container div that contains the list of images to blend. speed = amount of miliseconds that each fading step should take, increase this number to slow the fading down, lower the number to speed it up. pause = amount of miliseconds the image should be displayed before the next image begins to fade-in. caption = value of the id-attribute of an element that should display the text in the alt-attribute of the displayed image. This value is optional. If you are using the caption each image in the list must have an alt-attribute. */ x1[id] = id; x2[id] = speed; x3[id] = pause; x4[id] = caption; if(speed == null) { speed = 30; } if(pause == null) { pause = 1500; } var blend = document.getElementById(id); var image = firstChildImage(blend); curImage[id] = image; // BY ME startBlending(image, speed, pause, caption); } //make image a block-element and set the caption function startBlending(image, speed, pause, caption) {// alert("startBlending(image, speed, pause, caption)"); // all variables same as above. // THIS IS MY CODE THAT CONTROLS WHICH PAGE TO GO TO WHEN THE IMAGE IS CLICKED. id = image.parentNode.id curImage[id] = image; gotoPageAddress[id] = curImage[id].alt // alert ("gotoPageAddress[id] = " + gotoPageAddress[id]) // ------------------------------------ image.style.display = 'block'; if(caption != null) { document.getElementById(caption).innerHTML = image.alt; } continueFadeImage(image, 0, speed, pause, caption); } //set an increased opacity and check if the image is done blending function continueFadeImage(image, opacity, speed, pause, caption) {// alert("continueFadeImage(image, opacity, speed, pause, caption)"); // image = current image, opacity = as name implies, other variables same as above. opacity = opacity + 3; if(speed == 0){opacity = 103;} if (opacity < 103) { id = image.parentNode.id; //By me ************************** time1[id] = setTimeout(function() {fadeImage(image, opacity, speed, pause, caption)}, speed); } else { //if the image is done, set it to the background and make it transparent image.parentNode.style.backgroundImage = "url("+image.src+")"; // ASC: pause 1sec here to prevent MSIE image flash ... var paws=pause-1000; if (paws < 0 ) { paws = 0; } setOpacity(image,0); //get the next image and start blending it again image = getNextImage(image); id = image.parentNode.id; time2[id] = setTimeout(function() {startBlending(image, speed, pause, caption)}, paws); } } //set the opacity to a new value and continue the fading function fadeImage(image, opacity, speed, pause, caption) { // alert("fadeImage(image, opacity, speed, pause, caption)"); // all variables same as above. setOpacity(image,opacity); continueFadeImage(image, opacity, speed, pause, caption); } // ALL OF THE FOLLOWING ARE MY FUNCTIONS............................................ time1 = new Array(); //for the first timer in the function continueFadeImage. time2 = new Array(); //for the second timer in the function continueFadeImage. gotoPageAddress = new Array(); //holds the id of the page to go to when the image is clicked. curImage = new Array(); //makes the current image variable global. x1 = new Array(); x2 = new Array(); x3 = new Array(); x4 = new Array(); // The following function takes the viewer to another page when the
containing the images is clicked. function gotoPage(id){ //alert("gotoPage()"); if (gotoPageAddress[id] == "none") { var x = navigator.userAgent; if ((x.search("Safari") != -1) && (x.search("Chrome") == -1)){return;} //correction for Safari problem alert ("SORRY: A PAGE DOESN'T EXIST FOR THIS IMAGE !"); return; } //window.open(gotoWindow[index],"NewWindow") //alert("gotoPageAddress[id] = " + gotoPageAddress[id]) window.location.href = gotoPageAddress[id]; return; } // go back to the previous image. function goBack(id) { //alert("goBack()") clearTimeout(time1[id]); clearTimeout(time2[id]); //alert ("goBack entered - curImage[id] = " + curImage[id].src); setOpacity(curImage[id],0); curImage[id] = getPreviousImage(curImage[id]); setOpacity(curImage[id],1); if(x4[id] != null) { document.getElementById(x4[id]).innerHTML = curImage[id].alt; } gotoPageAddress[id] = curImage[id].alt continueFadeImage(curImage[id], 100, x2[id], x3[id], x4[id]); //return; } // go forward to the next image. function goForward(id){ //alert("goForward()") clearTimeout(time1[id]); clearTimeout(time2[id]); //alert ("goForward entered - curImage[id] = " + curImage[id].src); setOpacity(curImage[id],0); curImage[id] = getNextImage(curImage[id]); setOpacity(curImage[id],1); if(x4[id] != null) { document.getElementById(x4[id]).innerHTML = curImage[id].alt; } gotoPageAddress[id] = curImage[id].id continueFadeImage(curImage[id], 100, x2[id], x3[id], x4[id]); //return; } //make image invisible and set next one as current image function getNextImage(image) { // alert("getNextImage(image)"); // image = current image. if (next = nextImage(image)) { image.style.display = 'none'; image.style.zIndex = 0; next.style.display = 'block'; next.style.zIndex = 100; } else { //if there is not a next image, get the first image again next = firstChildImage(image.parentNode); } return next; } // The following three functions are modifications of the functions that go to the next image. // They are modified to go back to the previous page. //find previous image function previousImage(o) {// alert("previousImage(o)"); // o = current image do o = o.previousSibling; while(o && o.tagName != 'IMG'); return o; } //find last image inside an element function lastChildImage(o) {// alert("lastChildImage(o)"); // o = image.parentNode or document.getElementById(id) both are the parent div. o = o.lastChild; while(o && o.tagName != 'IMG') { o = o.previousSibling; } return o; } //make image invisible and set previous one as current image function getPreviousImage(image) { // alert("getPreviousImage(image)"); // image = current image. if (previous = previousImage(image)) { image.style.display = 'none'; image.style.zIndex = 0; previous.style.display = 'block'; previous.style.zIndex = 100; } else { //if there is not a next image, get the first image again previous = lastChildImage(image.parentNode); } return previous; } function getImage (id,imgId){ //alert ("getImage entered: id = " + id + " and imgId = " + imgId); clearTimeout(time1[id]); clearTimeout(time2[id]); //alert ("curImage[id] = " + curImage[id].id); setOpacity(curImage[id],0); curImage[id].style.display = 'none'; curImage[id].style.zIndex = 0; curImage[id] = document.getElementById(imgId); //alert ("curImage[id] changed to = " + curImage[id].id); curImage[id].style.display = 'block'; curImage[id].style.zIndex = 100; gotoPageAddress[id] = curImage[id].alt continueFadeImage(curImage[id], 100, x2[id], x3[id], x4[id]); }