001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
015:
016:
017:
018:
019:
020:
021:
022:
023:
024:
025:
026:
027:
028:
029:
030:
031:
032:
033:
034:
035:
036:
037:
038:
039:
040:
041:
042:
043:
044:
045:
046:
047:
048:
049:
050:
051:
052:
053:
054:
055:
056:
057:
058:
059:
060:
061:
062:
063:
064:
065:
066:
067:
068:
069:
070:
071:
072:
073:
074:
075:
076:
077:
078:
079:
080:
081:
082:
083:
084:
085:
086:
087:
088:
089:
090:
091:
092:
093:
094:
095:
096:
097:
098:
099:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
| if (typeof Product!='undefined') {
Product.Zoom = Class.create();
Product.Zoom.prototype = {
initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl){
this.containerEl = $(imageEl).parentNode;
this.imageEl = $(imageEl);
this.handleEl = $(handleEl);
this.trackEl = $(trackEl);
this.hintEl = $(hintEl);
this.containerDim = Element.getDimensions(this.containerEl);
this.imageDim = Element.getDimensions(this.imageEl);
this.imageDim.ratio = this.imageDim.width/this.imageDim.height;
this.floorZoom = 1;
if (this.imageDim.width > this.imageDim.height) {
this.ceilingZoom = this.imageDim.width / this.containerDim.width;
} else {
this.ceilingZoom = this.imageDim.height / this.containerDim.height;
}
if (this.imageDim.width <= this.containerDim.width
&& this.imageDim.height <= this.containerDim.height) {
this.trackEl.up().hide();
this.hintEl.hide();
this.containerEl.removeClassName('product-image-zoom');
return;
}
this.imageX = 0;
this.imageY = 0;
this.imageZoom = 1;
this.sliderSpeed = 0;
this.sliderAccel = 0;
this.zoomBtnPressed = false;
this.showFull = false;
this.selects = document.getElementsByTagName('select');
this.draggable = new Draggable(imageEl, {
starteffect:false,
reverteffect:false,
endeffect:false,
snap:this.contain.bind(this)
});
this.slider = new Control.Slider(handleEl, trackEl, {
axis:'horizontal',
minimum:0,
maximum:Element.getDimensions(this.trackEl).width,
alignX:0,
increment:1,
sliderValue:0,
onSlide:this.scale.bind(this),
onChange:this.scale.bind(this)
});
this.scale(0);
Event.observe($(zoomInEl), 'mousedown', this.startZoomIn.bind(this));
Event.observe($(zoomInEl), 'mouseup', this.stopZooming.bind(this));
Event.observe($(zoomInEl), 'mouseout', this.stopZooming.bind(this));
Event.observe($(zoomOutEl), 'mousedown', this.startZoomOut.bind(this));
Event.observe($(zoomOutEl), 'mouseup', this.stopZooming.bind(this));
Event.observe($(zoomOutEl), 'mouseout', this.stopZooming.bind(this));
},
scale: function (v) {
var centerX = (this.containerDim.width*(1-this.imageZoom)/2-this.imageX)/this.imageZoom;
var centerY = (this.containerDim.height*(1-this.imageZoom)/2-this.imageY)/this.imageZoom;
var overSize = (this.imageDim.width > this.containerDim.width
|| this.imageDim.height > this.containerDim.height);
this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));
if (overSize) {
if (this.imageDim.width > this.containerDim.width) {
this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
} else if (this.imageDim.height > this.containerDim.height) {
this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
}
if(this.containerDim.ratio){
this.imageEl.style.height =
(this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px';
}
} else {
this.slider.setDisabled();
}
this.imageX = this.containerDim.width*(1-this.imageZoom)/2-centerX*this.imageZoom;
this.imageY = this.containerDim.height*(1-this.imageZoom)/2-centerY*this.imageZoom;
this.contain(this.imageX, this.imageY, this.draggable);
return true;
},
startZoomIn: function()
{
if (!this.slider.disabled) {
this.zoomBtnPressed = true;
this.sliderAccel = .002;
this.periodicalZoom();
this.zoomer = new PeriodicalExecuter(this.periodicalZoom.bind(this), .05);
}
return this;
},
startZoomOut: function()
{
if (!this.slider.disabled) {
this.zoomBtnPressed = true;
this.sliderAccel = -.002;
this.periodicalZoom();
this.zoomer = new PeriodicalExecuter(this.periodicalZoom.bind(this), .05);
}
return this;
},
stopZooming: function()
{
if (!this.zoomer || this.sliderSpeed==0) {
return;
}
this.zoomBtnPressed = false;
this.sliderAccel = 0;
},
contain: function (x,y,draggable) {
var dim = Element.getDimensions(draggable.element);
var xMin = 0, xMax = this.containerDim.width-dim.width;
var yMin = 0, yMax = this.containerDim.height-dim.height;
x = x>xMin ? xMin : x;
x = x<xMax ? xMax : x;
y = y>yMin ? yMin : y;
y = y<yMax ? yMax : y;
if (this.containerDim.width > dim.width) {
x = (this.containerDim.width/2) - (dim.width/2);
}
if (this.containerDim.height > dim.height) {
y = (this.containerDim.height/2) - (dim.height/2);
}
this.imageX = x;
this.imageY = y;
this.imageEl.style.left = this.imageX+'px';
this.imageEl.style.top = this.imageY+'px';
return [x,y];
}
}
} |
