kotori web solutions Maren Arnhold


Magento: Produktbild-Zoom per Doppelklick deaktivieren

Die im modern-Theme von Magento standardmäßig mitgelieferte Möglichkeit, auf Produktseiten die zugehörige Illustration per Doppelklick aus ihrem Rahmen herauszuzoomen, ist zwar ein netter optischer Effekt - bei der Entwicklung eigener Themes ist diese Funktionalität allerdings nicht immer erwünscht, sei es aufgrund von Kundenvorgaben oder aus eigenen ästhetischen Erwägungen heraus.

Damit nur der Zoombalken am unteren Rand der Produktabbildung aktiv bleibt, die Vergrößerung mittels Doppelklick allerdings abgeschaltet wird, ist in JavaScript eine Änderung am Product.Zoom-Objekt bzw. dessen Prototypisierung notwendig. Dieses Objekt wird eigentlich in /js/Varien/product.js definiert und muss für unsere Zwecke überschrieben werden, indem der Code aus Listing 1 weit unten (in jedem Fall aber nach der Einbindung von product.js) in den Header des betreffenden Seitentemplates (z. B. 2columns-right.phtml oder 2columns-left.phtml) eingefügt wird. Im Vergleich zum Originalobjekt fehlen hier die toggleFull-Methode sowie der Event-Observer, der den Doppelklick auf das Produktbild an diese Methode bindet.

Wollen wir uns auch noch des Zoombalkens entledigen, sind weitere Anpassungen, entsprechend Listing 2, erforderlich.

Autorin: Maren Arnhold
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];
		}
	}
 
}
Listing 1: Doppelklick in die Produktabbildung deaktiviert, Zoombalken funktional

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
if (typeof Product!='undefined') {
 
	Product.Zoom = Class.create();
 
	Product.Zoom.prototype = {
 
		initialize: function(imageEl){
			this.containerEl = $(imageEl).parentNode;
			this.imageEl = $(imageEl);
 
			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.containerEl.removeClassName('product-image-zoom');
				return;
			}
 
			this.selects = document.getElementsByTagName('select');
 
			this.scale(0);
 
			document.getElementsByClassName('zoom')[0].style.display='none';
			$('image').style.cursor = 'default';
 
		},
 
		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);
 
			return true;
		},
 
		contain: function (x,y) {
 
			this.imageX = x;
			this.imageY = y;
 
			this.imageEl.style.left = this.imageX+'px';
			this.imageEl.style.top = this.imageY+'px';
 
			return [x,y];
		}
	}
 
}
Listing 2: Doppelklick in die Produktabbildung und auch Zoombalken deaktiviert


comments powered by Disqus
ANZEIGE
kotori web solutions Maren Arnhold bietet einen Komplettservice rund um Webdesign, Webprogrammierung und Webhosting. Suchen Sie nach einer Lösung für Ihre private Homepage? Möchten Sie ein eigenes Blog betreiben und suchen dafür ein geeignetes CMS und entsprechenden Webspace? Oder interessieren Sie sich für E-Commerce und benötigen einen Webshop? Dann sollten wir uns kennenlernen - eine kostenlose Erstberatung ist selbstverständlich!
© 2013 kotori web solutions Maren Arnhold. Alle Rechte vorbehalten/All rights reserved..