// ----------------------------------------------------------------------------------- // // 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 APIs copyright their respective owners // // ----------------------------------------------------------------------------------- // --- version date: 11/28/05 -------------------------------------------------------- // get current photo id from URL var thisURL = document.location.href; var splitURL = thisURL.split("#"); var photoId = splitURL[1] - 1; // if no photoId supplied then set default var photoId = (!photoId)? 0 : photoId; // CSS border size x 2 var borderSize = 10; // Photo directory for this gallery var photoDir = "photos/"; var photoArray = new Array( // Source, Width, Height, Caption new Array("annabelle300x225.jpg", "300", "225", "\"Annabelle in custom Granny Hat with delicate picot trim.\""), new Array("abby350x467.jpg", "350", "467", "\"Abby in Lamb Set\""), new Array("tybeeshirts500x375.jpg", "500", "375", "\"Custom Crab Shirts For Family Holiday. \""), new Array("charliedog.jpg", "307", "444", "\"Sweet Charlie\""), new Array("charlietruck.jpg", "404", "303", "\"Charlie in the fire truck shirt with real fire fighter Dad!\""), new Array("Jake300x400.jpg", "300", "400", "\"Jake Jones 5 weeks!!\""), new Array("Kylle4th.jpg", "264", "395", "\"Kylle in the cool beaded 4th of July T-Shirt\""), new Array("Reeddoggieshirt.jpg", "315", "410", "\"Reed\""), new Array("Phoebe350x484.jpg", "350", "484", "\"Phoebe's 1st Birthday!\""), new Array("charlie350x415.jpg", "350", "415", "\"Future Firefighter-Charlie!\""), new Array("maddon3.jpg", "300", "342", "\"I love my shirt!\""), new Array("harrytruck300x377.jpg", "300", "377", "\"Handsome Harry\""), new Array("amandaandharry400x229.jpg", "400", "229", "\"Princess Amanda and Captain Harry\""), new Array("Amandadress300x400.jpg", "300", "400", "\"Amanda in Flower Garden Dress\""), new Array("harrydog250x378.jpg", "250", "378", "\"Harry and Ace Dog\""), new Array("kaylee.jpg", "400", "300", "\"Kaylee from California\""), new Array("MaddonHead2.jpg", "300", "270", "\"Maddon\""), new Array("Happy_Customer_21.jpg", "214", "300", "\"Kennedy ~ Age: 4 months\""), new Array("Happy_Customer_20.jpg", "214", "300", "\"Alexandria in dress\""), new Array("Happy_Customer_19.jpg", "400", "300", "\"Big sister and little sister set\""), new Array("Happy_Customer_18.jpg", "236", "300", "\"Rooker's first birthday (shirt front)\""), new Array("Happy_Customer_17.jpg", "200", "300", "\"Rooker's first birthday (shirt back)\""), new Array("Happy_Customer_16.jpg", "242", "300", "\"Rooker wearing his dino t-shirt\""), new Array("Happy_Customer_15.jpg", "259", "300", "\"Sweet baby boy in cool dino set\""), new Array("Happy_Customer_14.jpg", "318", "300", "\"Kayleigh in custom daisy shirt\""), new Array("Happy_Customer_13.jpg", "214", "300", "\"Red Dog long sleeve shirt\""), new Array("Happy_Customer_12.jpg", "313", "300", "\"Sam in custom train design tee\""), new Array("Happy_Customer_11.jpg", "225", "300", "\"Rrrribit! Krr-plunk.\""), new Array("Happy_Customer_10.jpg", "400", "300", "\"Firetruck shirts for fireman's 3 sons\""), new Array("Happy_Customer_9.jpg", "205", "300", "\"Macy in Texas, age 3\""), new Array("Happy_Customer_8.jpg", "172", "300", "\"Star of Life for a Paramedic's son\""), new Array("Happy_Customer_7.jpg", "214", "300", "\"\""), new Array("Happy_Customer_6.jpg", "191", "300", "\"Your new designs are ever so precious!\""), new Array("Happy_Customer_5.jpg", "400", "300", "\"You do very lovely work\""), new Array("Happy_Customer_4.jpg", "225", "300", "\"The lion is adorable!\""), new Array("Happy_Customer_3.jpg", "202", "300", "\"\""), new Array("Happy_Customer_2.jpg", "225", "300", "\"Jonathan wearing the MOST adorable outfit\""), new Array("Happy_Customer_1.jpg", "450", "300", "\"I can't believe how soft the fabric is!\"") ); // Define each photo's name, height, width, and caption // var photoArray = new Array( // Source, Width, Height, Caption // new Array("Happy_Customer_18.jpg", "236", "300", "\"Rooker's first birthday (shirt front)\""), // new Array("Happy_Customer_17.jpg", "200", "300", "\"Rooker's first birthday (shirt back)\""), // new Array("Happy_Customer_16.jpg", "242", "300", "\"Rooker wearing his dino t-shirt\""), // new Array("Happy_Customer_15.jpg", "259", "300", "\"Sweet baby boy in cool dino set\""), // new Array("Happy_Customer_14.jpg", "318", "300", "\"Kayleigh in custom daisy shirt\""), // new Array("Happy_Customer_13.jpg", "214", "300", "\"Red Dog long sleeve shirt\""), // new Array("Happy_Customer_12.jpg", "313", "300", "\"Sam in custom train design tee\""), // new Array("Happy_Customer_11.jpg", "225", "300", "\"Rrrribit! Krr-plunk.\""), // new Array("Happy_Customer_10.jpg", "400", "300", "\"Firetruck shirts for fireman's 3 sons\""), // new Array("Happy_Customer_1.jpg", "450", "300", "\"I can't believe how soft the fabric is!\""), // new Array("Happy_Customer_2.jpg", "225", "300", "\"Jonathan wearing the MOST adorable outfit\""), // new Array("Happy_Customer_3.jpg", "202", "300", ""), // new Array("Happy_Customer_4.jpg", "225", "300", "\"The lion is adorable!\""), // new Array("Happy_Customer_5.jpg", "400", "300", "\"You do very lovely work\""), // new Array("Happy_Customer_6.jpg", "191", "300", "\"Your new designs are ever so precious!\""), // new Array("Happy_Customer_7.jpg", "214", "300", ""), // new Array("Happy_Customer_8.jpg", "172", "300", "Star of Life for a Paramedic's son"), // new Array("Happy_Customer_9.jpg", "205", "300", "Macy in Texas, age 3") // ); // Number of photos in this gallery var photoNum = photoArray.length; /*--------------------------------------------------------------------------*/ // Additional methods for Element added by SU, Couloir Object.extend(Element, { getWidth: function(element) { element = $(element); return element.offsetWidth; }, setWidth: function(element,w) { element = $(element); element.style.width = w +"px"; }, setHeight: function(element,h) { element = $(element); element.style.height = h +"px"; }, setSrc: function(element,src) { element = $(element); element.src = src; }, setHref: function(element,href) { element = $(element); element.href = href; }, setInnerHTML: function(element,content) { element = $(element); element.innerHTML = content; } }); /*--------------------------------------------------------------------------*/ var Slideshow = Class.create(); Slideshow.prototype = { initialize: function(photoId) { this.photoId = photoId; this.photo = 'Photo'; this.photoBox = 'Container'; this.prevLink = 'PrevLink'; this.nextLink = 'NextLink'; this.captionBox = 'CaptionContainer'; this.caption = 'Caption'; this.counter = 'Counter'; this.loader = 'Loading'; }, getCurrentSize: function() { // Get current height and width, subtracting CSS border size this.wCur = Element.getWidth(this.photoBox) - borderSize; this.hCur = Element.getHeight(this.photoBox) - borderSize; }, getNewSize: function() { // Get current height and width this.wNew = photoArray[photoId][1]; this.hNew = photoArray[photoId][2]; }, getScaleFactor: function() { this.getCurrentSize(); this.getNewSize(); // Scalars based on change from old to new this.xScale = (this.wNew / this.wCur) * 100; this.yScale = (this.hNew / this.hCur) * 100; }, setNewPhotoParams: function() { // Set source of new image Element.setSrc(this.photo,photoDir + photoArray[photoId][0]); // Set anchor for bookmarking Element.setHref(this.prevLink, "#" + (photoId+1)); Element.setHref(this.nextLink, "#" + (photoId+1)); }, setPhotoCaption: function() { // Add caption from gallery array Element.setInnerHTML(this.caption,photoArray[photoId][3]); //Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum)); }, resizePhotoBox: function() { this.getScaleFactor(); new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.5, queue: 'front'}); new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.5}); // Dynamically resize caption box as well Element.show('CaptionContainer'); Element.setWidth(this.captionBox,this.wNew-(-100)); }, showPhoto: function(){ new Effect.Fade(this.loader, {delay: 1.0, duration: 0.3}); // Workaround for problems calling object method "afterFinish" new Effect.Appear(this.photo, {duration: 1.0, queue: 'end', afterFinish: function(){Element.show('PrevLink');Element.show('NextLink');}}); }, nextPhoto: function(){ // Figure out which photo is next (photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++; this.initSwap(); }, prevPhoto: function(){ // Figure out which photo is previous (photoId == 0) ? photoId = photoArray.length - 1 : photoId--; this.initSwap(); }, initSwap: function() { // Begin by hiding main elements Element.show(this.loader); Element.hide(this.photo); Element.hide(this.captionBox); Element.hide(this.prevLink); Element.hide(this.nextLink); // Set new dimensions and source, then resize this.setNewPhotoParams(); this.resizePhotoBox(); this.setPhotoCaption(); } } /*--------------------------------------------------------------------------*/ // Establish CSS-driven events via Behaviour script var myrules = { '#Photo' : function(element){ element.onload = function(){ var myPhoto = new Slideshow(photoId); myPhoto.showPhoto(); } }, '#PrevLink' : function(element){ element.onmouseover = function(){ //soundManager.play('beep'); } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.prevPhoto(); //soundManager.play('select'); } }, '#NextLink' : function(element){ element.onmouseover = function(){ //soundManager.play('beep'); } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.nextPhoto(); //soundManager.play('select'); } }, a : function(element){ element.onfocus = function(){ this.blur(); } } }; // Add window.onload event to initialize Behaviour.addLoadEvent(init); Behaviour.apply(); function init() { var myPhoto = new Slideshow(photoId); myPhoto.initSwap(); //soundManagerInit(); }