// ----------------------------------------------------------------------------------- // // 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("custombulldog350x638.jpg", "350", "638", "\"Custom Bulldog Bib and Burp Set\""), new Array("customschool360x414.jpg", "360", "414", "\"Custom shirt for private school.\""), new Array("customladybug335x227.jpg", "335", "227", "\"Custom Ladybug Hat w/ ladybugs all the way around.\""), new Array("BibBurp305x300.jpg", "305", "300", "\"Burp and Bib Gift Set\""), new Array("abbybehind300x400.jpg", "300", "400", "\"Add a name on the behind!\""), new Array("seahorseboy400x533.jpg", "400", "533", "\"Sea Horse Design customized for a Sea Island Boutique\""), new Array("seahorsegirl400x300.jpg", "400", "300", "\"Sea Horse Design customized for a Sea Island Boutique\""), new Array("tractor300x225.jpg", "300", "225", "\"Cool Tractor...John Deere Style\""), new Array("blueairplane352x298.jpg", "352", "298", "\"Choose different colors on your design!\""), new Array("icecream400x300.jpg", "400", "300", "\"Ice Cream Cone\""), new Array("jeb400x300.jpg", "400", "300", "\"Curly Brown Labradoodle\""), new Array("phoebe450x322.jpg", "450", "322", "\"Add name to behind onesie or bloomers.(tutu not included)\""), new Array("ethanbunnyset400x300.jpg", "400", "300", "\"Jack-Rabbit Set\""), new Array("sabine1.jpg", "390", "172", "\"For 9News' Kathy Sabine\""), new Array("amandapanda350x432.jpg", "350", "432", "\"Amanda Panda Dress\""), new Array("giftwrap08.jpg", "400", "344", "\"Every order is packaged uniquely!\""), new Array("poppydress350x262.jpg", "350", "262", "\"Poppy Dress\""), new Array("heartflag.jpg", "300", "358", "\"Beaded American Flag\""), new Array("bibs400x300.jpg", "400", "300", "\"Custom Bibs\""), new Array("daffyromper.jpg", "300", "371", "\"Furry Labradoodle\""), new Array("maddon3.jpg", "300", "270", "\"Maddon\""), new Array("baseball.jpg", "300", "202", "\"A true classic! Baseball is timeless.\""), new Array("lambbib.jpg", "300", "250", "\"Not your typical bib!\""), new Array("train.jpg", "300", "225", "\"Choo Choo Luke\""), new Array("airplane.jpg", "300", "225", "\"Captain Luke!\""), new Array("Butterfly Dress.jpg", "363", "300", "\"Kaylee's Butterfly Dress\""), new Array("custom_26.jpg", "400", "300", "\"Lily Dog Hat, Woof!\""), new Array("princessfrog.jpg", "206", "300", "\"Custom Frog Princess\""), new Array("custom_28.jpg", "400", "300", "\"Lily Dog set for \"Mallori\"\""), new Array("custom_27.jpg", "312", "208", "\"Princess \"Olivia\" design with Crown\""), new Array("custom_25.jpg", "400", "300", "\"Girl Zebra with pink rick rack\""), new Array("custom_23.jpg", "400", "294", "\"Custom hat for Prince Froggie Set\""), new Array("custom_22.jpg", "400", "300", "\"Custom Granny Hat with Pink Picot Trim\""), new Array("custom_21.jpg", "382", "400", "\"Customized Train design for Sam\""), new Array("custom_20.jpg", "300", "382", "\"Customized Daisy design for Kimberly\""), new Array("custom_19.jpg", "300", "323", "\"Customized Daisy design for Brooke\""), new Array("custom_18.jpg", "400", "300", "\"Customized Frog Prince design for Cooper\""), new Array("custom_17.jpg", "300", "400", "\"Custom daisy shirt for Ruby\""), new Array("custom_16.jpg", "400", "273", "\"Bzzzz... Bumble bee hat for baby\""), new Array("custom_15.jpg", "300", "447", "\"Bzzzz... Bumble bee shirt for baby\""), new Array("custom_14.jpg", "430", "290", "\"Love Bug shirt and Granny Hat\""), new Array("custom_13.jpg", "416", "300", "\"The Maltese Cross\""), new Array("custom_12.jpg", "271", "370", "\"Airplane Shirt and Pant Set w/ lil' plane on leg\""), new Array("custom_11.jpg", "408", "300", "\"Vintage Fire Truck design with baby's name along ladder\""), new Array("custom_10.jpg", "392", "300", "\"Name in flames for fire truck shirt.\""), new Array("custom_9.jpg", "384", "300", "\"Back of Airplane design with baby's name in banner\""), new Array("custom_8.jpg", "486", "300", "\"Close-up of baby's intials in dinosaur\""), new Array("custom_7.jpg", "283", "400", "\"Coordinated set with baby's intials\""), new Array("custom_6.jpg", "434", "300", "\"Customized hat with baby's last name\""), new Array("custom_5.jpg", "300", "226", "\"Small daisies on pant legs\""), new Array("custom_4.jpg", "473", "300", "\"Close-up of Averi's name with small daisy\""), new Array("custom_3.jpg", "307", "400", "\"Short-sleeve onesie with Averi's name\""), new Array("custom_2.jpg", "327", "300", "\"Close-up of baby Ella's name hand-embroidered on short-sleeve tee\""), new Array("custom_1.jpg", "291", "400", "\"Coordinated set with bows and baby Ella's name\"") ); // Define each photo's name, height, width, and caption // var photoArray = new Array( // Source, Width, Height, Caption // new Array("custom_28.jpg", "400", "300", "Lily Dog set for \"Mallori\""), // new Array("custom_27.jpg", "312", "208", "Princess \"Olivia\" design with Crown"), // new Array("custom_26.jpg", "400", "300", "Lily Dog Hat, Woof!"), // new Array("custom_25.jpg", "400", "300", "Girl Zebra with Lace Trim"), // new Array("custom_24.jpg", "350", "442", "Romper w/ Gingham Lace Trim on legs \"Kobi\" name on flower stem"), // new Array("custom_23.jpg", "400", "294", "Custom hat for Prince Froggie Set"), // new Array("custom_22.jpg", "400", "300", "Custom Granny Hat with Pink Picot Trim"), // new Array("custom_21.jpg", "392", "400", "Customized Train design for Sam"), // new Array("custom_20.jpg", "300", "382", "Customized Daisy design for Kimberly"), // new Array("custom_19.jpg", "300", "323", "Customized Daisy design for Brooke"), // new Array("custom_18.jpg", "400", "300", "Customized Frog Prince design for Cooper"), // new Array("custom_1.jpg", "291", "400", "Coordinated set with bows and baby Ella's name"), //new Array("custom_2.jpg", "327", "300", "Close-up of baby Ella's name hand-embroidered on short-sleeve tee"), //new Array("custom_17.jpg", "300", "400", "Custom daisy shirt for Ruby"), //new Array("custom_3.jpg", "307", "400", "Short-sleeve onesie with Averi's name"), //new Array("custom_4.jpg", "473", "300", "Close-up of Averi's name with small daisy"), //new Array("custom_5.jpg", "300", "226", "Small daisies on pant legs"), //new Array("custom_6.jpg", "434", "300", "Customized hat with baby's last name"), //new Array("custom_7.jpg", "283", "400", "Coordinated set with baby's intials"), //new Array("custom_8.jpg", "486", "300", "Close-up of baby's intials in dinosaur"), //new Array("custom_9.jpg", "384", "300", "Back of Airplane design with baby's name in banner"), //new Array("custom_10.jpg", "392", "300", "Decorated baby's name"), //new Array("custom_11.jpg", "408", "300", "Vintage Fire Truck design with baby's name along ladder"), //new Array("custom_12.jpg", "271", "370", "Airplane Shirt and Pant Set w/ lil' plane on leg"), //new Array("custom_13.jpg", "416", "300", "Maltese Hat"), //new Array("custom_14.jpg", "430", "290", "Love Bug shirt and Granny Hat"), //new Array("custom_15.jpg", "300", "447", "Bzzzz... Bumble bee shirt for baby"), //new Array("custom_16.jpg", "400", "273", "Bzzzz... Bumble bee hat for baby") // ); // 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_blue'; 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-(-250)); }, 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(); }