// ----------------------------------------------------------------------------------- // // 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 //RF var photoDir = "photos/01/"; //var photoDir = "http://media.gordon.nl/shoots/"; var photoDir = ""; // Define each photo's name, height, width, and caption var photoArray = new Array( // Source, Width, Height, Caption new Array("http://media.gordon.nl/shoots/foto_64_1613_nyczvi85pk.jpg", "500", "359", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1614_dvoxr8vrlx.jpg", "500", "339", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1615_2xrt0ttcut.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1616_xe0mk5svu9.jpg", "500", "346", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1617_layynnlm89.jpg", "263", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1618_pmwluwwifx.jpg", "321", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1619_885ddzagxu.jpg", "278", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1620_o2whoym5kr.jpg", "483", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1621_zu3j2ai5tt.jpg", "500", "377", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1622_m8lcww4hci.jpg", "238", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1623_oe44dnn6kn.jpg", "500", "378", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1624_j0jj6u5z57.jpg", "268", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1625_3x375vgi61.jpg", "352", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1626_hfriavz7fi.jpg", "500", "371", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1627_sy0a1jpqb5.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1628_4ppj9jbx3m.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1629_exklf023ba.jpg", "500", "369", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1630_kupo37yyyv.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1631_yyxr31vmjb.jpg", "262", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1632_ix0xn5kyxj.jpg", "266", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1633_epq9ep3ajz.jpg", "267", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1634_sfzlw6muvi.jpg", "273", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1635_2ycom0ieua.jpg", "500", "363", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1636_mwe076y564.jpg", "500", "378", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1637_mfjgi0sjk6.jpg", "270", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1638_byv6bus9xs.jpg", "266", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1639_p46zh0zbg2.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1640_kxcunwoxfm.jpg", "500", "393", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1641_5br41phpzo.jpg", "476", "400", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1642_brchwtn7er.jpg", "500", "389", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1643_6wg4cp7v3d.jpg", "500", "334", "©William Rutten"), new Array("http://media.gordon.nl/shoots/foto_64_1644_xbp40bj3dz.jpg", "500", "334", "©William Rutten") ); // 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.3, queue: 'front'}); new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3}); // Dynamically resize caption box as well Element.setWidth(this.captionBox,this.wNew-(-borderSize)); }, showPhoto: function(){ new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3}); // Workaround for problems calling object method "afterFinish" new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');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(); //RF soundManagerInit(); }