// ----------------------------------------------------------------------------------- // // 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 -------------------------------------------------------- // Define each photo's name, width, height and caption var photoArray = new Array( // Source, Width, Height, Caption new Array("ptestcharles.jpg", "350", "320", "
InterprŽtation libre sure ma ville, mon quartier, Pointe St-Charles, pour Global Yodel.","
Personal vision of Pointe St-Charles, the area I live in Montreal, for Global Yodel."), new Array("rose_age.jpg", "350", "320", "
Lectrice qui Žcrit ˆ propos de sa prise de conscience qu'il faut profiter du moment prŽsent, Facts and Arguments, Globe and Mail.","
Redaer writes about taking time to live the moment, Globe and Mail."), new Array("city_love.jpg", "350", "320", "
Dossier traitant de l'homme et la ville au cinŽma, plus prŽcisŽment comment l'homme fait corps avec la ville, page de couverture du magazine 24 images.","
How man embraces the city, cover page for the magazine 24 images, specializing in film."), new Array("city_love_2.jpg", "350", "320", "
Dossier traitant de l'homme et la ville au cinŽma, plus prŽcisŽment comment l'homme fait corps avec la ville, page de couverture du magazine 24 images.","
How man embraces the city, cover page for the magazine 24 images, specializing in film."), new Array("equinoxe.jpg", "350", "320", "
Article sur l'equinoxe d'automne, et les traditions qui y sont associŽ, New York Times.","
Fall equinoxe and its traditions, New York Times "), new Array("fairy_tales.jpg", "350", "320", "
Couverture du catalogue promotionel de Three in a Box sur le th\u00E8me des contes de f\u00E9es - Gagnant Communication Arts 2011, chosen American Illustration.","
Cover for the promotional catalog, Three in a box, fairy tale theme - Winner Communication Arts 2011, chosen American Illustration."), new Array("victoria_2.jpg", "350", "320", "
Image tirŽe d'une sŽrie de cinq pour le dŽpliant annuel de la Symphonie de Victoria, Wax Partnership.","
One of five images for the Victoria Symphony annual brochure, Wax Partnership"), new Array("victoria_1.jpg", "350", "320", "
Image tirŽe d'une sŽrie de cinq pour le dŽpliant annuel de la Symphonie de Victoria, Wax Partnership. Grand Prix LUX 2011, culturel.","
One of five images for the Victoria Symphony annual brochure, Wax Partnership. Grand Prize LUX 2011, cultural"), new Array("flute_kite.jpg", "350", "320", "
Image tirŽe d'une sŽrie de cinq pour le dŽpliant annuel de la Symphonie de Victoria, Wax Partnership.","
One of five images for the Victoria Symphony annual brochure, Wax Partnership"), new Array("garden.jpg", "350", "320", "
Image crŽŽe pour le livret promotionel de mon agent, postŽ l'ŽtŽ dernierÉsur le thme de l'ŽtŽ.","
Promotional image for my rep's promotional brochure, sent out last summerÉ on the theme of summer."), new Array("breast_cancer.jpg", "350", "320", "
Page d'ouverture pour un article sur les nouvelles approches pour combattre le cancer du sein, Portland Monthly - Gagnant Communication Arts 2011, 3x3 Annual 08, Grand Prix LUX 2011, Žditorial.","
Opening page for an article on new approaches to fight breast cancer, Portland Monthly - Winner Communication Arts 2011, 3x3 Annual 08, Grand Prize LUX 2011, editorial."), new Array("LA_Times.jpg", "350", "320", "
Section Arts et Livres du LA Times.","
Arts and Books section for the LA Times"), new Array("sirene.jpg", "350", "320", "
Page d'ouverture pour une s\u00E9rie d'articles sur les transformations profondes de vie, magazine Vita - Gagnant:3x3 Annual 08, finalist Lux 2011, editorial","
Opening page for a series of articles on profound life changes, Vita magazine - Winner:3x3 Annual 08, finalist LUX 2011 editorial."), new Array("velo_sante.jpg", "350", "320", "
TirŽe dune sŽrie sure les modes de santŽ sains, dans un dŽpliant soutenant les gens atteints de psoriasis, Rodale Communications.","
Pulled front a series depicting healthy lifestyles, in a brochure for people with psioriasis, Rodale Communications"), new Array("obesity_child.jpg", "350", "320", "
Image sur l'obŽsitŽ des enfants aux ƒtats-Unis, avec des suggestions pour aider les parents ˆ aider leurs enfants ˆ changer certains comportements, magazine Diane.","
Image for an in depth article on child obesity in the US, with tips to help parents help their children, Diane magazine."), new Array("deprime_pere.jpg", "350", "320", "
Image sur la dŽpression paternelle, tirŽe d'une sŽrie sur les soins pŽrinataux, atelier du lapin blanc pour le site internet Echo.","
Image on fatherly depression, part of a series on child care, atelier du lapin blanc, for the Echo website."), new Array("jungle.jpg", "350", "320", "
Article de recherche mŽdicale sur l'hŽpatite C, proposant des pistes nouvelles mais complexes pour rejoindre entre autres la population malade, magazine de recherche Nature.","
Research article on heptitis C, offering new yet complex solutions to finding the sick population, Nature magazine."), new Array("refugee_clinic.jpg", "350", "320", "
Comment les Žtudiants en mŽdecine aquirent une expŽrience inŽgalŽe dans une clinique pour rŽfugiŽs aux ƒtats-Unis, entre autres gr‰ce au fait que la clientle provient de pays en guerre, Yale magazine of medecine.","
How medical studants get an inavaluable experience through a refugee clinic in the States, partly because the patients come from countries at war, Yale magazine of medicine."), new Array("orange.jpg", "350", "320", "
Subvention ontarienne pour les professeurs afin de les inciter ˆ cr\u00E9er des mod\u00E8les de projets \u00E9ducatifs dont pourraient b\u00E9n\u00E9ficier d'autres professeurs en suivant leur mod\u00E8le-type, couverture de magazine, Fresh Art and Design.","
An ontario grant gives the opportunity to teachers to create an educational pilot project which other teachers can then use following their model, cover of magazine,Fresh Art and Design"), new Array("corn.jpg", "350", "320", "
Food and Wine.","
"), new Array("widow.jpg", "350", "320", "
Le sentiment d'imposteur dune veuve qui ne se consid\u00E8re pas tout ˆ fait veuve puisque'elle \u00E9tait s\u00E9par\u00E9e depuis plusieurs ann\u00E9es de son mari avant son suicide, Globe and Mail.","
The imposter syndrome of a widow who doesn't feel like a widow, having been separated from her husband several years before his suicide, Globe and Mail"), new Array("goldilocks.jpg", "350", "320", "
Boucles d'Or: image pour le catalogue promotionel de Three in a Box sur le th\u00E8me des contes de f\u00E9es.","
Goldilocks: inside image for the promotional catalog, Three in a box, fairy tale theme."), new Array("hoax.jpg", "350", "320", "
Canular: les chiens peuvent-ils sentir avant tout le monde que leur ma”tre est atteint d'une maladie grave?. Grand Prix LUX pice promotionelle","
Hoax: can dogs really detect that their master has an illness before anyone else? LUX Grand Prize promotional piece"), new Array("savings_children.jpg", "350", "320", "
Comment transmettre la valeur de l'argent aux enfants, l'Actualit\u00E9.","
How to teach the value of money to our children, l'Actualit\u00E9."), new Array("hospital_system.jpg", "350", "320", "
Le syst\u00E8me de sant\u00E9 public du QuŽbec: on le garde cožte que cožte, l'Actualit\u00E9.","
Public Health System in Quebec: we're keeping it going no matter what, l'Actualit\u00E9."), new Array("alcohol.jpg", "350", "320", "
Article sur les effets des habitudes liŽes notre consommation d'alcool sur les enfants, Financial Times de Londres.","
The effects of our alcohol consumption on our children, Financial Times of London."), new Array("mirror_cancer.jpg", "350", "320", "
Une femme raconte le jour o le m\u00E9decin lui annonce son diagnostique de cancer, et qu'elle se trouve propuls\u00E9e de l'autre c™t\u00EA du mirroir, Globe and Mail.","
A woman tells the story of the day her doctor diagonosed a cancer, she felt propelled to the other side of the mirror, Globe and Mail."), new Array("mole.jpg", "350", "320", "
Les cliniques sp\u00E9cialis\u00E9es dans le traitement dermatologique sont-elles toutes fiables? Financial Times de Londres.","
Are all dermatology clinics equal? Financial Times of London."), new Array("savings_squirrel.jpg", "350", "320", "
Comment Žviter les piges du march\u00E9 de l'\u00E9pargne, l'Actualit\u00E9.","
How to avoid the traps in the savings market, l'Actualit\u00E9."), new Array("pregnancy.jpg", "350", "320", "
Les infirmi\u00E8res d'Angeleterre aimeraient trouver un test qui saurait d\u00E9tecter la consommation d'alcool chez la femme enceinte, Financial Times de Londres.","
Nurses in Great Britain would like to find a test that would detect how much pregnant woman are actually drinking, Financial Times de Londres."), new Array("fertility.jpg", "350", "320", "
L'industrie pharmaceutique mise sur l'espoir des couples avec des probl\u00E8mes de fertilit\u00EA, Financial Times de Londres.","
Pharmaceutical industry tables on the hope of couples with fertility issues, Financial Times of London."), new Array("virginity.jpg", "350", "320", "
La virginit\u00E9: arme de domination massive, Ch‰telaine. Prix d'Excellence: Communication Arts, Illustration West 47, 3x3 Proshow No.6, Applied Arts.","
Male dominance on women's virginity, Chatelaine magazine. Excellence Awards: Communication Arts, Illustration West 47, 3x3 Proshow No.6, Applied Arts."), new Array("bird.jpg", "350", "320", "
Une m\u00E8re raconte le dŽpart du nid familial de sa fille atteinte dÕune d\u00E9ficence intellectuelle, Globe and Mail.","
A mom tells the story of her disabled daughter leaving home, Globe and Mail."), new Array("prof.jpg", "350", "320", "
Le d\u00E9crochage chez les jeunes enseignants du syst\u00E8me public, magazine Inter.","
Young teachers massively leaving the profession, Inter magazine."), new Array("fish.jpg", "350", "320", "
Des promesses d'assurance-vie abusive, Businessweek.","
Abusive life insurance promises made to the elderly, Businessweek."), new Array("videogames_men.jpg", "350", "320", "
Pour devenir un homme il faut s'interesser ˆ autre chose que son look et les jeux vid\u00E9os, article sign\u00E9 Beno”t Dutrizac, sept 2008, magazine Ch‰telaine. Prix: Illustration West 47.","
To be a man, you have to have other interests besides your looks and videogames, Chatelaine, Sept 2008 issue. Awarded: Illustration West 47."), new Array("nurse.jpg", "350", "320", "
Une bonne utilisation des cinq sens permet ˆ l'infirmire de d\u00E9passer les technologies, Registered Nurse Journal .","
Nurses must rely on their senses rather than depend on technology, Registered Nurse Journal."), new Array("good_evil.jpg", "350", "320", "
Illustration pour deux articles, un sur la m\u00E9fiance g\u00E9n\u00E9rale ˆ l'\u00E9gard de la bont\u00E9, l'autre pronant les b\u00E9n\u00E9fices de la m\u00E9chancet\u00E9 , Ch‰telaine, oct 2008.","
Illustration for two articles: one on how we tend to be suspicious of other peoples' goodness, the second stating the benefits of being mean, Chatelaine magazine, oct 2008 issue."), new Array("heart.jpg", "350", "320", "
Interpr\u00E9tation d'un article relatant l'\u00E9xperience d'un journaliste apr\u00E8s une chirurgie cardiaque et son soudain attachement aux traditions catholiques, Ch‰telaine, nov 2008.","
Interpretation of an article about a journalist's experience after heart surgery and his sudden attachement to his christian tradition, Chatelaine magazine, oct 2008 issue."), new Array("umbrella_legal_counselling.jpg", "350", "320", "
Services l\u00E9gaux disponibles pour le regroupement du personel enseignant et administratif de l'Ontario, Ontario Principal Council.","
Legal advice services available for the administrative and teaching personel of Ontario, Ontario Principal Council."), new Array("mourning_2.jpg", "350", "320", "
Une femme raconte l'admiration qu'elle a pour son pre en deuil, the Globe and Mail, d.a. Cinders Mcleod.","
A woman writes about her admiration for her father in mourning, the Globe and Mail, a.d. Cinders Mcleod."), new Array("pinup_quebec.jpg", "350", "320", "
Illustration pour l'affiche de l'\u00E9vnement Ooh lˆ lˆ Illustration Show, ˆ Toronto en 2008, Prix LUX 2008","
Illustration for the poster of the Ooh lˆ lˆ illustration show held in Toronto, spring 2008, LUX prize 2008."), new Array("angel_urban.jpg", "350", "320", "
Illustration pour la couverture du recueil de po\u00E9sie de Pierre Labrie, Le vent tout autour, \u00E9ditions La Bagnole .","
Illustration for the cover of a poetry book by Pierre Labrie, Le vent tout autour, La Bagnole publisher."), new Array("high_heel_shoe_woman_work.jpg", "350", "320", "
Article qui constate la lente \u00E9volution de lÕ\u00E9quit\u00E9 salariale pour les femmes sur le march\u00E9 du travail, et ce que doivent faire les femmes pour changer la donne.","
Article reporting the slow evolution of salary-equity for women on the marketplace, and what is in their power to change the situation.") ); // Number of photos in this gallery var photoNum = photoArray.length; // get current photo id from URL var thisURL = document.location.href; var splitURL = thisURL.split("#"); var photoId = splitURL[1] - 1; // if no photoId supplied or if request out of range then set default var photoId = (!photoId)? 0 : photoId; var photoId = (photoId<0)? 0 : photoId; var photoId = (photoId>photoNum-1)? 0 : photoId; // Photo directory for this gallery var photoDir = "portfolio/casson/"; // Icon directory for this gallery var iconDir = "portfolio/casson/"; // Icon prefix Note that icons must be gifs var iconPrefix = "thumb_"; var iconsHTML = " " /*--------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------*/ var Slideshow = Class.create(); Slideshow.prototype = { initialize: function(photoId) { this.photoId = photoId; this.photo = 'Photo'; this.photoBox = 'ImageContainer'; this.photoContainer = 'OuterContainer'; this.linkContainer = 'LinkContainer' this.prevLink = 'PrevLink'; this.nextLink = 'NextLink'; this.captionBox = 'CaptionContainer'; this.captionFr = 'CaptionFr'; this.captionEng = 'CaptionEng'; this.counter = 'Counter'; this.loader = 'Loading'; this.iconsBox = 'IconContainer'; this.icons = 'Icons'; }, 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.counter,((photoId+1)+'/'+photoNum)); Element.setInnerHTML(this.captionFr,photoArray[photoId][3]); Element.setInnerHTML(this.captionEng,photoArray[photoId][4]); }, showPhoto: function(){ new Effect.Fade(this.loader, {delay: 0.5, duration: 0.5}); // Workaround for problems calling object method "afterFinish" new Effect.Appear(this.photo, {duration: 1.0, queue: 'end', afterFinish: function(){ new Effect.Appear('CaptionContainer', {delay: 0.0, duration: 0.5}); new Effect.Appear('LinkContainer', {delay: 0.0, duration: 0.5});}}); }, 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(); }, goToPhoto: function(newId){ // Set go to photo var tempId = newId; var splitTempId = tempId.split("_"); var Id = splitTempId[1] - 1; if(photoId != Id){ photoId = Id; this.initSwap(); } }, initSwap: function() { // Begin by hiding main elements Element.hide(this.photo); Element.show(this.loader); Element.hide(this.captionBox); Element.hide(this.linkContainer); // Set new dimensions and source, then resize this.setNewPhotoParams(); this.setPhotoCaption(); }, initIcons: function() { // for (var i = 0; i < photoNum; i++) { tempName = photoArray[i][0].split("."); iconFileName = tempName[0] + ".gif" iconURL = (iconDir+iconPrefix+iconFileName); iconsHTML = iconsHTML + "icon"; } Element.setInnerHTML('icons', iconsHTML); //Calculate the total width of all the icons including borders and margins var totalIconWidth = (Number(Element.getStyle('ic_1', 'margin-left').replace('px',''))+Number(Element.getStyle('ic_1', 'margin-right').replace('px',''))+Number(Element.getStyle('ic_1', 'border-left-width').replace('px',''))+Number(Element.getStyle('ic_1', 'border-right-width').replace('px',''))+Number(Element.getStyle('ic_1', 'width').replace('px','')))*photoNum + 5 Element.setWidth('icons', totalIconWidth); //Scroll to current page var iconPageNumber=Math.ceil((photoId)/9)-1 if (iconPageNumber>0) { scrollForward('IconFrame', 'icons', '531', iconPageNumber); } //debug(totalIconWidth); }, initCaption: function() { Element.setWidth(this.captionBox,this.wCur-(-borderSize)); }, initSwapFirst: function() { // Begin by hiding main elements Element.hide(this.photo); Element.show(this.loader); Element.hide(this.captionBox); //Element.setInnerHTML(this.caption,""); //Element.setInnerHTML(this.counter,""); Element.hide(this.linkContainer); // Set new dimensions and source, then resize this.setNewPhotoParams(); //this.resizePhotoBox(); //this.initCaption(); //To resize icon box, activate the following line //Element.setWidth(this.iconsBox,this.wCur-(-borderSize)); this.setPhotoCaption(); this.initIcons(); Behaviour.apply(); } } /*--------------------------------------------------------------------------*/ // Establish CSS-driven events via Behaviour script var myrules = { 'body' : function(el){ Effect.Center('WindowBox'); window.onresize = function(el){ Effect.Center('WindowBox'); } }, '#Photo' : function(element){ element.onload = function(){ var myPhoto = new Slideshow(photoId); myPhoto.showPhoto(); } }, '#PrevLink' : function(element){ element.onmouseover = function(){ } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.prevPhoto(); } }, /* '#Icons img' : function(element){ element.onmouseover = function(){ soundManager.play('beep'); //Element.setOpacity(this,'1.00'); } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.goToPhoto(this.id); soundManager.play('select'); } element.onmouseout = function(){ //Element.setOpacity(this,'0.5'); } },*/ '#NextLink' : function(element){ element.onmouseover = function(){ } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.nextPhoto(); } }, a : function(element){ element.onfocus = function(){ this.blur(); } }, //Icon Behaviors 'img.MouseOver' : function(el){ setMouseOver(el); element.onmouseover = function(){ mouseGoesOver(this); } element.onclick = function(){ } element.onmouseout = function(){ mouseGoesOut(this); } }, '#IconFrame img': function(el){ element.onmouseover = function(){ Element.setStyle(this, { border: 'solid 1px orange'} ); } element.onclick = function(){ var myPhoto = new Slideshow(photoId); myPhoto.goToPhoto(this.id); } element.onmouseout = function(){ Element.setStyle(this, { border: 'solid 1px white'} ); } }, '#icon_prev img' : function(){ element.onload = function(el){ } element.onclick = function(el){ scrollBack('IconFrame', 'icons', '531'); } }, '#icon_next img' : function(){ element.onload = function(el){ } element.onclick = function(el){ scrollForward('IconFrame', 'icons', '531', '1'); } } }; // Add window.onload event to initialize Behaviour.addLoadEvent(init); Behaviour.apply(); function init() { var myPhoto = new Slideshow(photoId); myPhoto.initSwapFirst(); }