// -----------------------------------------------------------------------------------
//
// 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 = 2;
// Photo directory for this gallery
var photoDir = "/portfolio/02/";
// Define each photo's name, height, width, and caption
var photoArray = new Array(
// Source, Width, Height, Caption
new Array("ubikann_page.jpg", "280", "375", "UbiKann Ad campaign : this advert, I designed, ran in two national Internet magazines (including .net magazine) both as a full page and 1/3 page ad. The slogan translates as 'We won't promise you the moon, just the earth'"),
new Array("ubikann_broch_out.jpg", "500", "353", "UbiKann Ad campaign : the UbiKann advertising campaign, I designed, was also accompanied by postal mailings. This is the oustide of the folded A3 size brochure (A4 when folded). The slogan translates as 'We won't promise you the moon, just the earth'"),
new Array("ubikann_broch_inside.jpg", "500", "353", "UbiKann Ad campaign : the UbiKann advertising campaign, I designed, was also accompanied by postal mailings. This is the inside of the folded A3 size brochure (A4 when folded)."),
new Array("ubikann_netsurf.jpg", "475", "375", "UbiKann Ad campaign : these two parts combined, that I designed, ran as a 1/3 page ad in the French Internet magazine 'Netsurf'"),
new Array("national_1_3_pages.jpg", "450", "375", "National Ads : also designed three adverts that appeared on three consecutive pages in two national magazines for a previous company"),
new Array("Soiree_Verve_V1.jpg", "500", "340", "Flyers for Verve party : I designed two flyers for a party at the lounge/restaurant MI:AM. This is the first of the two"),
new Array("Soiree_Verve_Back.jpg", "357", "241", "Flyers for Verve party : I designed two flyers for a party at the lounge/restaurant MI:AM. This is the back of both flyers (actual size)"),
new Array("Soiree_Verve_V2.jpg", "500", "340", "Flyers for Verve party : I designed two fliers for a party at the lounge/restaurant MI:AM. This is the second of the two"),
new Array("high_school.jpg", "500", "375", "Designing in high school : I created a guide for my high school for the job fair that took place there. I also created a newspaper, both were acclaimed in the local newspaper"),
new Array("uni_newspapers.jpg", "454", "305", "Designing in university : I continued with the newspapers at university creating and designing the layout for a French newspaper at Aston University"),
new Array("uni_parties.jpg", "500", "375", "Designing in university : I also used my designing skills to create fliers and posters for a party I organised for international students while I was at Aston University"),
new Array("agatha_brochure.jpg", "500", "375", "Theatre : I designed the brochure for the Besancon English Language Theatre's Agatha Christie production of 'The Mousetrap'")
);
// 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');}});
},
// added by Bernie Zajac for thumbnail listing.
specificPhoto: function(pID) {
photoId = pID;
this.initSwap();
},
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');
}
},
// added by bernie zajac for thumbnail listing.
'.thumbnail' : function(element) {
element.onclick = function() {
var elementId = element.id;
var newPhotoId = elementId.split("thmb");
newPhotoId = newPhotoId[1];
var myPhoto = new Slideshow(photoId);
myPhoto.specificPhoto(newPhotoId);
}
},
'.fl' : function(element){
element.onmouseover = function(){
soundManager.play('beep');
}
element.onclick = function(){
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();
}