// ----------------------------------------------------------------------------------- // // 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 = "medias/creations/"; // Define each photo's name, height, width, and caption var photoArray = new Array( // Source, Width, Height, Caption new Array('206.jpg', '452', '280', 'OPRH  Visiter le site   2010-07-23 - Conception logo, site internet et supports de communication'),new Array('203.jpg', '452', '280', 'Bio Car Services  Visiter le site   2010-03-01 - Création du logo et supports de communication. Conception et réalisation du site internet.'),new Array('205.jpg', '452', '280', 'Bull\'Café  Visiter le site   2010-02-25 - Création du logo et supports de communication. Conception et réalisation du site internet.'),new Array('204.jpg', '452', '280', 'Menus Valérie  Visiter le site   2010-02-25 - Création du logo et supports de communication. Conception et réalisation du site internet.'),new Array('200.jpg', '452', '280', 'Imp. Valentin  Visiter le site   2009-30-12 - Réalisation du site internet'),new Array('199.jpg', '452', '280', 'Arepo  Visiter le site   2009-30-12 - Réalisation du site internet'),new Array('201.jpg', '452', '280', 'SECO  Visiter le site   2009-30-11 - Conception logo et supports de communication, et réalisation du site internet'),new Array('198.jpg', '452', '280', 'Couleur Verte  Visiter le site   2009-10-30 - Réalisation du site internet'),new Array('195.jpg', '452', '280', 'Art N\' Work  Visiter le site   2009-10-07 - Conception logo, site internet et supports de communication '),new Array('190.jpg', '452', '280', 'MJ Energies  Visiter le site   2009-10-05 - Conception et réalisation du site internet'),new Array('188.jpg', '452', '280', 'Douzet Paysage  Visiter le site   2009-09-21 - Conception et réalisation du site internet'),new Array('194.jpg', '452', '280', 'Eurl PIMENTA  Visiter le site   2009-09-16 - Conception logo, page web et supports de communication'),new Array('197.jpg', '452', '280', 'ENR Devpt  Visiter le site   2009 - Conception et réalisation du site internet'),new Array('191.jpg', '452', '280', 'L\'art de la Véranda  Visiter le site   2009 - Création du logo et supports de communication. Conception et réalisation du site internet.'),new Array('187.jpg', '452', '280', 'ADML  Visiter le site   2009 - Conception et réalisation du site internet'),new Array('186.jpg', '452', '280', 'Aqui Portugal   2009 - Conception logo et supports de communication'),new Array('185.jpg', '452', '280', '2009 La Reconstruction  Visiter le site   2009 - Développement et gestion de projet pour l\'agence suisse Adelicious'),new Array('182.jpg', '452', '280', 'Ducry SA  Visiter le site   2008-12-06 - Réalisation du site internet'),new Array('180.jpg', '452', '280', 'Corbas BC  Visiter le site   2008-12-01 - Réalisation du site internet'),new Array('179.jpg', '452', '280', 'PROGETEL  Visiter le site   2008-11-01 - Réalisation du site internet'),new Array('181.jpg', '452', '280', 'EDISPO.COM   2008-04-15 - Réalisation du site internet'),new Array('176.jpg', '452', '280', 'Lumatec   2008 - Développement en sous-traitance'),new Array('173.jpg', '452', '280', 'Slow Up  Visiter le site   2008 - Développement et gestion de projet pour l\'agence Adelicious'),new Array('171.jpg', '452', '280', 'ARIA  Visiter le site   2008 - Réalisation du site internet + identité visuelle'),new Array('167.jpg', '452', '280', 'Entreprise Poisson   2008 - Conception de la charte graphique'),new Array('165.jpg', '452', '280', 'Mod\'Fil   2008 - Conception de la charte graphique'),new Array('164.jpg', '452', '280', 'Etudes Créations   2008 - Conception de la charte graphique'),new Array('163.jpg', '452', '280', 'Nauticap   2008 - Conception de la charte graphique'),new Array('161.jpg', '452', '280', 'Garage Piedallos   2008 - Conception de la charte graphique'),new Array('156.jpg', '452', '280', 'Verre tendance Déco   2008 - Conception de la charte graphique'),new Array('153.jpg', '452', '280', 'Pharmacie Pourtier   2008 - Conception de la charte graphique'),new Array('152.jpg', '452', '280', 'Domaine Ormerie   2008 - Conception de la charte graphique'),new Array('147.jpg', '452', '280', 'Côté Piscine   2008 - Conception de la charte graphique'),new Array('146.jpg', '452', '280', 'Construction Watrin   2008 - Conception de la charte graphique'),new Array('145.jpg', '452', '280', 'SOS froid comtois   2008 - Conception de la charte graphique'),new Array('144.jpg', '452', '280', 'Liberté coiffure   2008 - Conception de la charte graphique'),new Array('default.jpg', '157', '157', 'LSI   2008 - Conception de la charte graphique'),new Array('141.jpg', '452', '280', 'Boutique Eclipse   2008 - Conception de la charte graphique'),new Array('138.jpg', '452', '280', 'Architecte Chanson   2008 - Conception de la charte graphique'),new Array('136.jpg', '452', '280', 'Galerie Plessis   2008 - Conception de la charte graphique'),new Array('135.jpg', '452', '280', 'Le Couscoussier   2008 - Conception de la charte graphique'),new Array('134.jpg', '452', '280', 'Mediation Conseil Conjugal   2008 - Conception de la charte graphique'),new Array('131.jpg', '452', '280', 'Cave Express   2008 - Conception de la charte graphique'),new Array('130.jpg', '452', '280', 'Pronetec   2008 - Conception de la charte graphique'),new Array('128.jpg', '452', '280', 'Ski N Surf   2008 - Conception de la charte graphique'),new Array('125.jpg', '452', '280', 'La Bodega   2008 - Conception de la charte graphique'),new Array('124.jpg', '452', '280', 'La main dans le sac   2008 - Conception de la charte graphique'),new Array('121.jpg', '452', '280', 'Imag\'in Hair   2008 - Conception de la charte graphique'),new Array('120.jpg', '452', '280', 'SCP Gobert   2008 - Conception de la charte graphique'),new Array('118.jpg', '452', '280', 'Curien Peinture   2008 - Conception de la charte graphique'),new Array('63.jpg', '452', '280', 'Camping Les Pierres Couchées   2008 - Conception de la charte graphique'),new Array('62.jpg', '452', '280', 'MJMS Ranch   2008 - Conception de la charte graphique'),new Array('61.jpg', '452', '280', 'Amulances AZUR   2008 - Conception de la charte graphique'),new Array('60.jpg', '452', '280', 'FAMI AFM   2008 - Conception de la charte graphique'),new Array('59.jpg', '452', '280', 'Celtic traiteur   2008 - Conception de la charte graphique'),new Array('58.jpg', '452', '280', 'Roc BTP   2008 - Conception de la charte graphique'),new Array('57.jpg', '452', '280', 'Couette service   2008 - Conception de la charte graphique'),new Array('56.jpg', '452', '280', 'Optic 2000   2008 - Conception de la charte graphique'),new Array('55.jpg', '452', '280', 'Format V   2008 - Conception de la charte graphique'),new Array('53.jpg', '452', '280', 'Pharmacie de l\'Elorn   2008 - Conception de la charte graphique'),new Array('50.jpg', '452', '280', 'Aux trois obus   2008 - Conception de la charte graphique'),new Array('49.jpg', '452', '280', 'Délices d\'Asie   2008 - Conception de la charte graphique'),new Array('48.jpg', '452', '280', 'Auberge du Douet   2008 - Conception de la charte graphique'),new Array('46.jpg', '452', '280', 'Barletta   2008 - Conception de la charte graphique'),new Array('44.jpg', '452', '280', 'Le Donegal   2008 - Conception de la charte graphique'),new Array('43.jpg', '452', '280', 'Renault   2008 - Conception de la charte graphique'),new Array('42.jpg', '452', '280', 'A vos volants   2008 - Conception de la charte graphique'),new Array('41.jpg', '452', '280', 'Recup Auto Jobard   2008 - Conception de la charte graphique'),new Array('40.jpg', '452', '280', 'Garage Nissan   2008 - Conception de la charte graphique'),new Array('39.jpg', '452', '280', 'Constance boat   2008 - Conception de la charte graphique'),new Array('38.jpg', '452', '280', 'Azzolin maçon   2008 - Conception de la charte graphique'),new Array('36.jpg', '452', '280', 'SAS Alleard   2008 - Conception de la charte graphique'),new Array('35.jpg', '452', '280', 'Bertrand Dupé   2008 - Conception de la charte graphique'),new Array('31.jpg', '452', '280', 'Azzouz Façades   2008 - Conception de la charte graphique'),new Array('29.jpg', '452', '280', 'FP Bois   2008 - Conception de la charte graphique'),new Array('26.jpg', '452', '280', 'Déco Dahes   2008 - Conception de la charte graphique'),new Array('24.jpg', '452', '280', 'Running Conseil   2008 - Conception de la charte graphique'),new Array('23.jpg', '452', '280', 'Josera France   2008 - Conception de la charte graphique'),new Array('21.jpg', '452', '280', 'Atelier de Floval   2008 - Conception de la charte graphique'),new Array('20.jpg', '452', '280', 'Esprit Nature   2008 - Conception de la charte graphique'),new Array('18.jpg', '452', '280', 'Til & Nana   2008 - Conception de la charte graphique'),new Array('17.jpg', '452', '280', 'Mirage modélisme   2008 - Conception de la charte graphique'),new Array('16.jpg', '452', '280', 'Vibrations & Amincissement   2008 - Conception de la charte graphique'),new Array('15.jpg', '452', '280', 'Ras des pâquerettes   2008 - Conception de la charte graphique'),new Array('14.jpg', '452', '280', 'Laïta Jeans   2008 - Conception de la charte graphique'),new Array('13.jpg', '452', '280', 'Pretty Women   2008 - Conception de la charte graphique'),new Array('12.jpg', '452', '280', 'Notaires associés   2008 - Conception de la charte graphique'),new Array('11.jpg', '452', '280', 'Avocat Omez   2008 - Conception de la charte graphique'),new Array('10.jpg', '452', '280', 'Avocats Hessin   2008 - Conception de la charte graphique'),new Array('9.jpg', '452', '280', 'Atelier 7372   2008 - Conception de la charte graphique'),new Array('7.jpg', '452', '280', 'LH Equipement   2008 - Conception de la charte graphique'),new Array('6.jpg', '452', '280', 'Pâtisserie Yvard   2008 - Conception de la charte graphique'),new Array('5.jpg', '452', '280', 'Boulangerie Gourdon   2008 - Conception de la charte graphique'),new Array('3.jpg', '452', '280', 'Axamco   2008 - Conception de la charte graphique'),new Array('1.jpg', '452', '280', 'Langues et séjours   2008 - Conception de la charte graphique'),new Array('175.jpg', '452', '280', 'TransEurope  Visiter le site   2007 - Développement et gestion de projet pour l\'agence Adelicious'),new Array('174.jpg', '452', '280', 'Le System Café  Visiter le site   2007 - Réalisation du site internet'),new Array('116.jpg', '452', '280', 'La Cuillière jaune   2007 - Conception de la charte graphique'),new Array('114.jpg', '452', '280', 'A84 VI   2007 - Conception de la charte graphique'),new Array('113.jpg', '452', '280', 'Mag Auto Moto   2007 - Conception de la charte graphique'),new Array('106.jpg', '452', '280', 'Mary Couture   2007 - Conception de la charte graphique'),new Array('105.jpg', '452', '280', 'E2mi   2007 - Conception de la charte graphique'),new Array('104.jpg', '452', '280', 'Aid\'Adom   2007 - Conception de la charte graphique'),new Array('100.jpg', '452', '280', 'Poêle Faïence Carpatterra   2007 - Conception de la charte graphique'),new Array('99.jpg', '452', '280', 'Ancalimë Events   2007 - Conception de la charte graphique'),new Array('98.jpg', '452', '280', 'Olivier Dupont   2007 - Conception de la charte graphique'),new Array('96.jpg', '452', '280', 'SARL Escade   2007 - Conception de la charte graphique'),new Array('95.jpg', '452', '280', 'Hôtel de la Poste   2007 - Conception de la charte graphique'),new Array('94.jpg', '452', '280', 'Cabinet de Podologie Marie Salvado   2007 - Conception de la charte graphique'),new Array('92.jpg', '452', '280', 'Gîte les Tavaillons   2007 - Conception de la charte graphique'),new Array('88.jpg', '452', '280', 'Traiteur Bonhomme   2007 - Conception de la charte graphique'),new Array('87.jpg', '452', '280', 'Alain Medium   2007 - Conception de la charte graphique'),new Array('86.jpg', '452', '280', 'Améziane Thérapeute Reiki   2007 - Conception de la charte graphique'),new Array('85.jpg', '452', '280', 'Restaurant la Sarrazine   2007 - Conception de la charte graphique'),new Array('83.jpg', '452', '280', 'Troc Viré   2007 - Conception de la charte graphique'),new Array('82.jpg', '452', '280', 'Peinture Arbez   2007 - Conception de la charte graphique'),new Array('79.jpg', '452', '280', 'CMBA   2007 - Conception de la charte graphique'),new Array('73.jpg', '452', '280', 'Biscuiterie Quinéville   2007 - Conception de la charte graphique'),new Array('72.jpg', '452', '280', 'Au tutti frutti   2007 - Conception de la charte graphique'),new Array('70.jpg', '452', '280', 'Accastillage du Morin   2007 - Conception de la charte graphique'),new Array('default.jpg', '157', '157', 'Ets Hurel   2007 - Conception de la charte graphique'),new Array('66.jpg', '452', '280', 'H de G Autos   2007 - Conception de la charte graphique') ); // 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(); soundManagerInit(); }