// ----------------------------------------------------------------------------------- // // 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 = "photos/img/slideshow/"; // Location of photos for gallery var borderSize = 2; // = 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("01_5680.jpg", "470", "353", " - The Natrix2."), new Array("03_5694.jpg", "352", "470", " - Front wheel drive reduces the weight of the bike. The small pulley has a free floating attachment for a smoother running chain."), new Array("04_5703.jpg", "352", "470", " - The \'superman\' handle bars give a sportive look to the bike."), new Array("05_5704_2.jpg", "470", "353", " - The snake \"S\" shape of the frame gave the name to the bike: Natrix2."), new Array("06_0048.jpg", "470", "313", " - Detail of the rear part and the seat attachment."), new Array("09_5733.jpg", "470", "353", " - Highracer, dual 26\", fwd, \'superman\' steering, wheel base 1065 mm, seat height 520 mm, crank length 140 mm."), new Array("10_5728.jpg", "470", "353", " - Natrix Natrix is the Latin name for a snake which is as black as carbon."), new Array("12_5727.jpg", "470", "353", " - Natrix Natrix is the Latin name for a snake which is as black as carbon."), new Array("13_5734.jpg", "470", "353", " - Curves composition gives Natrix2 feminine expression."), new Array("14_5736.jpg", "470", "353", " - The rear break cable gets via a Teflon tube through the frame to the brake."), new Array("15_5739.jpg", "470", "353", " - The designer of the Natrix2."), new Array("DSC_3658.jpg", "470", "313", " - The Natrix2, racing in the one hour time trial of Cyclevision 2006."), new Array("DSC_3659.jpg", "470", "313", " - The Natrix2, racing in the one hour time trial of Cyclevision 2006.") ); // 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.ResizableContainer = new HTMLobj('ResizableContainer'); 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.ResizableContainer._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("images/slideshow/empty.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("images/slideshow/n2_loading.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.ResizableContainer.getWidth() - borderSize; var hCur = API.ResizableContainer.getHeight() - borderSize; // Begin tweening on a short timer setTimeout('API.ResizableContainer.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]; // 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("/photos/index.php#" + (photoId+1)); API.PrevLink.setHref("/photos/index.php#" + (photoId+1)); API.Counter.setInnerHtml(""+(photoId+1)+" of "+photoNum+" "); API.Caption.setInnerHtml(photoArray[photoId][3]); // 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; }