// ----------------------------------------------------------------------------------- // // This page coded by Scott Upton // http://www.uptonic.com | http://www.couloir.org // // This work is licensed under a Creative Commons License // Attribution-ShareAlike 2.0 // http://creativecommons.org/licenses/by-sa/2.0/ // // Associated API copyright 2002, Travis Beckham (www.squidfingers.com) // // ----------------------------------------------------------------------------------- // --- version date: 04/30/05 ------------------------------------------------------ var photoDir = "http://www219.pair.com/swansonr/pride_of_hawaii/"; // was for Max Kiesler (thanks!) http://www.maxkiesler.com/images/doors/"; // Location of photos for gallery var borderSize = 6; // = 2x CSS border size // get current photo id from URL var thisURL = document.location.href; var splitURL = thisURL.split("#"); var photoId = splitURL[1] - 1; // if no id in query string then set to 0 photoId = (!photoId)? 0:photoId; // Define each photo's name, height, width, and caption var photoArray = new Array( // Source, Width, Height, Caption new Array("100_3902.jpg", "640", "480", "Approaching Na Pali from Hanalei","Approaching the Na Pali Coast"), new Array("100_3907.jpg", "640", "480", "There Are Many Deep Valleys Along the Na Pali Coast","Typical Valley"), new Array("100_3906.jpg", "640", "480", "The Patchy Sunlight Plays Along the Base of the Valley","Play of Light"), new Array("100_3912.jpg", "640", "480", "Another Awesome Canyon" ,"Na Pali Coast"), new Array("100_3913.jpg", "640", "480", "Waterfalls Right Into the Ocean" ,"Waterfalls"), new Array("100_3915.jpg", "640", "480", "More Yet Awesome Valley" ,"Na Pali Valley"), new Array("100_3918.jpg", "640", "480", "A Natural Cave Made By Ocean Waves" ,"Natural Cave"), new Array("100_3916.jpg", "640", "480", "An Excursion Boat Gets Close to the Waterfall" ,"Excursion Boat"), new Array("100_3921.jpg", "640", "480", "Waterfall Cascading Down a Cliff" ,"Waterfall Closeup"), new Array("100_3923.jpg", "640", "480", "Spectacular Coastline" ,"Na Pali Coast"), // 10 new Array("100_3925.jpg", "640", "480", "Amazing Colors: Green Plants and Red Soil" ,"Amazing Colors"), new Array("100_3926.jpg", "640", "480", "Another Cave Made by Ocean Waves" ,"Sea Cave"), new Array("100_3928.jpg", "640", "480", "Another Waterfall" ,"Waterfall"), new Array("100_3929.jpg", "640", "480", "Another Huge Valley with Excursion Boat" ,"Huge Valley"), new Array("100_3930.jpg", "640", "480", "Spectacular View of Rugged Cliffs" ,"Rugged Cliffs"), new Array("100_3932.jpg", "640", "480", "The Cliff is Made Up of Vertical Knife-Edge Canyons" ,"Knife-Edge Canyons"), new Array("100_3933.jpg", "640", "480", "It Might Be a Little Hard to Get to This Beach" ,"Isolated Beach"), new Array("100_3936.jpg", "640", "480", "Another Waterfall" ,"Waterfall"), new Array("100_3938.jpg", "640", "480", "More Amazing Colors" ,"More Colors"), new Array("100_3940.jpg", "640", "480", "Isolated Beach" ,"Another Isolated Beach") ); function removeAllChildren(xxx) { while (xxx.hasChildNodes()) { xxx.removeChild(xxx.firstChild); } } function set_head(text) { var prompt = document.getElementById("subhead"); removeAllChildren(prompt); // remove all content // // add back in // newtext = document.createTextNode(text); // text for subhead prompt.appendChild(newtext); // add text to subhead } function load_larger() { // // set the target for the "larger" photo based on // the current target // var url = photoDir + '8' + photoArray[photoId][0]; popUp = window.open(url, 'photo', 'height=600,width=800,scrollbars=yes,resizable=yes,toolbar=yes,location=yes'); } // Number of photos in this gallery var photoNum = photoArray.length; // Create access to 'Detect' object and a place to put instances of 'HTMLobj' API = new Detect(); // CREATE INSTANCES & LOAD loadAPI = function(){ // Instantiate HTMLobj API.Container = new HTMLobj('Container'); API.Photo = new HTMLobj('Photo'); API.PhotoContainer = new HTMLobj('PhotoContainer'); API.LinkContainer = new HTMLobj('LinkContainer'); API.PrevLink = new HTMLobj('PrevLink'); API.NextLink = new HTMLobj('NextLink'); API.CaptionBlock = new HTMLobj('CaptionBlock'); API.Counter = new HTMLobj('Counter'); API.Caption = new HTMLobj('Caption'); API.LoadImg = new HTMLobj('LoadImg'); // Show initial photo cyclePhoto(photoId); } onload = loadAPI; // Fade in photo when it is loaded from the server initFade = function(){ // Show PhotoContainer again API.PhotoContainer.show(); // Be certain the tween is complete before fading, too var fade_timer = setInterval('startFade()', 1000); // Fade photo in when ready and clear listener startFade = function(){ if(API.Container._tweenRunning == false){ clearInterval(fade_timer); // Be certain fade is done running before allowing next/previous links to work // This avoids rapid fade-in when users click next/previous links in quick succession var adv_timer = setInterval('permitNextPrev()', 500); // Permit next/previous links to function normally when fade is completed permitNextPrev = function(){ if(API.Photo._fadeRunning == false){ clearInterval(adv_timer); // Only show links if there is more than one photo in array if(photoNum > 1){ API.LinkContainer.displayShow(); document.getElementById('NextLink').onclick = nextPhoto; document.getElementById('PrevLink').onclick = prevPhoto; } } else {return;} } // Swap out loading animation to spare CPU cycles when hidden anyway // API.LoadImg.setSrc("http://www.maxkiesler.com/images/slideshow/start.gif"); API.LoadImg.setSrc("start.gif"); // Show caption again API.CaptionBlock.show(); // Fade photo in API.Photo.fadeIn(0,15,33); } else {return;} } } // Prevent next/previous falsify = function(){ return false; } // Go to next photo nextPhoto = function(){ // Go to next photo if(photoId == (photoArray.length - 1)){ photoId = 0; } else {photoId++;} cyclePhoto(photoId); } // Go to previous photo prevPhoto = function(){ // If at start, go back to end if(photoId == 0){ photoId = photoArray.length - 1; } else {photoId--;} cyclePhoto(photoId); } // Alter class of elements changeElementClass = function(objId,setClass) { document.getElementById(objId).className = setClass; } // Function to load subsequent photos in gallery cyclePhoto = function(photoId){ // Swap in loading animation // API.LoadImg.setSrc("http://www.maxkiesler.com/images/slideshow/loading_ani2.gif"); //API.LoadImg.setSrc("radar-transparent.gif"); API.LoadImg.setSrc("snake_transparent.gif"); //API.LoadImg.setSrc("loading_ani2.gif"); // Hide link container if it is not already hidden API.LinkContainer.displayHide(); // Hide photo container and caption temporarily API.Photo.hide(); API.Photo.setOpacity(0); API.CaptionBlock.hide(); // Get dimensions of photo var wNew = photoArray[photoId][1]; var hNew = photoArray[photoId][2]; // Start tween on a delay var wCur = API.Container.getWidth() - borderSize; var hCur = API.Container.getHeight() - borderSize; // Begin tweening on a short timer setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500); setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500); setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500); setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500); setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500); // Get new photo source var newPhoto = photoDir + photoArray[photoId][0]; //alert(newPhoto); // Set source, width, and height of new photo API.Photo.setSrc(newPhoto); API.Photo.sizeTo(wNew,hNew); // Set links to new targets based on photoId API.NextLink.setHref("#" + (photoId+1)); API.PrevLink.setHref("#" + (photoId+1)); API.Counter.setInnerHtml((photoId+1)+" of "+photoNum+" |"); API.Caption.setInnerHtml(photoArray[photoId][3]); set_head(photoArray[photoId][4]); // set subhead // Event listeners for onload and onclick events document.getElementById('Photo').onload = initFade; // Block next/previous links until permitNextPrev() has fired document.getElementById('NextLink').onclick = falsify; document.getElementById('PrevLink').onclick = falsify; }