/* CLASSNAME: thumbScroller PARENT: none PREREQUISITES: mootools 1.2.4 DESCRIPTION: creates a scrolling presentation of thumbnails AUTHOR: David Hurst & Rob Swan VERSION: 1.00 HISTORY: Based originally on Rob Swan's MooFlow2 LASTUPDATE: 26 May 2010 by David Hurst & Rob Swan COPYRIGHT: (c)2010 Higher Sites Limited */ var thumbScroller = new Class({ Implements: [Options], options: { container: 'thumbscroller', //default name for the container, or pass it when calling the class //these values can be sent when calling the class leftOffset: 150, //set the left offset for the thumbs topOffset: 78, //set the top offset for the thumbs - this should also be set in the CSS for the DIV containing the thumb (allow enough top padding on container element for this) tmbSpacer: 55, //set the distance between the thumbs tmbWidth: 175, //set the width of the standard thumb - this should also be set in the CSS tmbHeight: 143, //set the height of the standard thumb - this should also be set in the CSS zoomWidth: 300 //set the width of the zoomed thumb - height is automatically calculated }, currentPosition: 0, //set the starting point - 0 is the leftmost thumb //instantiate core variables modifier: 0, zoomHeight: 0, zoomTop: 0, initialize: function(options) { //sort binding var self = this; //set options self.setOptions(options); //perform calculations self.modifier = self.options.tmbHeight / self.options.tmbWidth; self.zoomHeight = Math.floor(self.options.zoomWidth * self.modifier); self.zoomTop = Math.floor(self.options.topOffset - ((self.zoomHeight - self.options.tmbHeight) / 2)); //set up click actions $(self.options.container).getElements('div.' + self.options.container + '-item a').each(function(el, i) { el.addEvent('click', function(evt) { if(i != self.currentPosition) { //scroll this thumb to centre evt.stop(); self.gotoPosition(i); slider.set(i); } }) }) //set the total steps variable to be one less than the length as we want to count zero as a step var totalSteps = $(self.options.container).getElements('div.' + self.options.container + '-item').length - 1; //create slide var slider = new Slider($(self.options.container + '-slider'), $(self.options.container + '-slider').getElement('.knob'), { steps: totalSteps, wheel: true, onChange: function() { //set the thumb we want to display self.gotoPosition(this.step); } }).set(0); //set the default position this.setPosition(0); }, //scroll right forwardOne: function() { this.setPosition(this.currentPosition + 1); }, //scroll left backwardOne: function() { this.setPosition(this.currentPosition - 1); }, //scroll to a specific position gotoPosition: function(position) { //sort binding var self = this; //store current position var oldPosition = self.currentPosition; //comparisons if(position < oldPosition) { //scrolling left - set total distance and call method appropriate number of times var totalDistance = oldPosition - position; totalDistance.times(self.backwardOne, self); } else if(position > oldPosition) { //scrolling left - set total distance and call method appropriate number of times var totalDistance = position - oldPosition; totalDistance.times(self.forwardOne, self); } }, //set position imediately to the value given setPosition: function(position) { //sort binding var self = this; //update the position self.currentPosition = position; //loop through elements $(self.options.container).getElements('div.' + self.options.container + '-item').each(function(el, i){ //calculate values for the new distances if(i == position) { //this is the element we want to go to, so distance is 0 var distance = 0; //set element position variables var newLeft = self.options.leftOffset; //calculate new Z index for the active element (it's the value of the total number of items) var newZ = $(self.options.container).getElements('div.' + self.options.container + '-item').length; //zoom the thumb if moused over el.addEvent('mouseenter', function(){ el.morph({ 'left': self.options.leftOffset - ((self.options.zoomWidth - self.options.tmbWidth) / 2), 'top': self.zoomTop, 'height': self.zoomHeight, 'width': self.options.zoomWidth }); el.getElement('img').morph({ 'height': self.zoomHeight, 'width': self.options.zoomWidth }); }) //unzoom the thumb el.addEvent('mouseleave', function(){ el.morph({ 'left': self.options.leftOffset, 'top': self.options.topOffset, 'height': self.options.tmbHeight, 'width': self.options.tmbWidth }); el.getElement('img').morph({ 'height': self.options.tmbHeight, 'width': self.options.tmbWidth }); }) } else if(i > position) { //this is an element to the right of the centre element - calculate distance var distance = i - position; //perform position calculations and set variables var newLeft = self.options.leftOffset + (distance * (self.options.leftOffset + self.options.tmbSpacer)); //calculate new Z index for the element to the right (element is the value of the total number of items minus this index) var newZ = $(self.options.container).getElements('div.' + self.options.container + '-item').length - i; } else if(i < position) { //this is an element to the left of the centre element - calculate distance var distance = position - i; //perform position calculations and set variables var newLeft = self.options.leftOffset - (distance * (self.options.leftOffset + self.options.tmbSpacer)); //calculate new Z index for the element to the right (the same as this index) var newZ = i; } //tidy up in case mouseleave event failed to trigger - don't want to leave a zoomed thumb behind if(i != position) { //remove any mouse events el.removeEvents('mouseenter'); el.removeEvents('mouseleave'); //set size of element in case mouseleave failed to trigger el.setStyles({ 'top': self.options.topOffset, 'height': self.options.tmbHeight, 'width': self.options.tmbWidth }); el.getElement('img').setStyles({ 'height': self.options.tmbHeight, 'width': self.options.tmbWidth }); } //morph div to new position and size elements el.setStyles({ 'z-index': newZ }); el.morph({ 'left': newLeft }); }) } })