https://www.kaosalonpartner.se/_ui/responsive/common/js/jquery.zoom.custom.js

1/*!
2	Zoom v1.7.13 - 2014-04-29
3	Enlarge images on click or mouseover.
4	(c) 2014 Jack Moore - http://www.jacklmoore.com/zoom
5	license: http://www.opensource.org/licenses/mit-license.php
6*/
7(function ($) {
8	var defaults = {
9		url: false,
10		callback: false,
11		target: false,
12		duration: 120,
13		on: 'mouseover', // other options: grab, click, toggle
14		touch: true, // enables a touch fallback
15		onZoomIn: false,
16		onZoomOut: false,
17		zoomEnableCallBack:false,
18		zoomEnable:true,
19		magnify: 1,
20		longtouchtimer:function(){},
21		touchduration: 500
22	};
23
24	// Core Zoom Logic, independent of event listeners.
25	$.zoom = function(target, source, img, magnify) {
26		var targetHeight,
27			targetWidth,
28			sourceHeight,
29			sourceWidth,
30			xRatio,
31			yRatio,
32			offset,
33			position = $(target).css('position'),
34			$source = $(source);
35
36		// The parent element needs positioning so that the zoomed element can be correctly positioned within.
37		target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
38		target.style.overflow = 'hidden';
39
40		img.style.width = img.style.height = '';
41
42		var i= $("<div class='zoomImg'><div class='zoomImgMask'></div></div>")
43			.css({
44				width: img.width * magnify,
45				height: img.height * magnify,
46			}).appendTo(target);
47
48		$(img).appendTo(i);
49
50		return {
51			init: function() {
52				targetWidth = $(target).outerWidth();
53				targetHeight = $(target).outerHeight();
54
55				if (source === target) {
56					sourceWidth = targetWidth;
57					sourceHeight = targetHeight;
58				} else {
59					sourceWidth = $source.outerWidth();
60					sourceHeight = $source.outerHeight();
61				}
62
63				xRatio = (img.width - targetWidth) / sourceWidth;
64				yRatio = (img.height - targetHeight) / sourceHeight;
65
66				offset = $source.offset();
67
68
69
70
71			},
72			move: function (e) {
73
74
75				if(offset == undefined){
76					offset = {left:0,top:0}
77				}
78				
79
80
81				
82
83				var left = (e.pageX -  offset.left),
84					top = (e.pageY - offset.top);
85
86				top = Math.max(Math.min(top, sourceHeight), 0);
87				left = Math.max(Math.min(left, sourceWidth), 0);
88
89				$(img).parent(".zoomImg").css("left",(left * -xRatio) + 'px');
90				$(img).parent(".zoomImg").css("top",(top * -yRatio) + 'px');
91			}
92		};
93	};
94
95	$.fn.zoom = function (options) {
96		return this.each(function () {
97			var
98			settings = $.extend({}, defaults, options || {}),
99			//target will display the zoomed image
100			target = settings.target || this,
101			//source will provide zoom location info (thumbnail)
102			source = this,
103			$source = $(source),
104			img = document.createElement('img'),
105			$img = $(img),
106			mousemove = 'mousemove.zoom',
107			clicked = false,
108			touched = false,
109			$urlElement;
110
111			// If a url wasn't specified, look for an image element.
112			if (!settings.url) {
113				$urlElement = $source.find('img');
114				if ($urlElement[0]) {
115					settings.url = $urlElement.data('src') || $urlElement.attr('src');
116				}
117				if (!settings.url) {
118					return;
119				}
120			}
121
122			(function(){
123				var position = target.style.position;
124				var overflow = target.style.overflow;
125
126				$source.one('zoom.destroy', function(){
127					$source.off(".zoom");
128					target.style.position = position;
129					target.style.overflow = overflow;
130					$img.remove();
131				});
132				
133			}());
134
135			img.onload = function () {
136				var zoom = $.zoom(target, source, img, settings.magnify);
137
138
139				function start(e) {
140
141					if($.isFunction(settings.zoomEnableCallBack)){
142						settings.zoomEnable =   settings.zoomEnableCallBack.call(img)
143					} 
144
145					if(!settings.zoomEnable){
146						return false;
147					}
148
149
150					zoom.init();
151					zoom.move(e);
152
153					// Skip the fade-in for IE8 and lower since it chokes on fading-in
154					// and changing position based on mousemovement at the same time.
155					$(img).parent(".zoomImg").stop()
156					.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
157				}
158
159				function stop() {
160
161					if (settings.longtouchtimer){
162						clearTimeout(settings.longtouchtimer);
163					}
164
165
166					$(img).parent(".zoomImg").stop()
167					.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
168				}
169
170
171				// Mouse events
172				if (settings.on === 'grab') {
173					$source
174						.on('mousedown.zoom',
175							function (e) {
176								if (e.which === 1) {
177									$(document).one('mouseup.zoom',
178										function () {
179											stop();
180
181											$(document).off(mousemove, zoom.move);
182										}
183									);
184
185
186
187									settings.longtouchtimer = setTimeout(function(){
188										start(e);
189										$(document).on(mousemove, zoom.move);
190									}, settings.touchduration); 
191								
192									e.preventDefault();
193								}
194							}
195						);
196				} else if (settings.on === 'click') {
197					$source.on('click.zoom',
198						function (e) {
199							if (clicked) {
200								// bubble the event up to the document to trigger the unbind.
201								return;
202							} else {
203								clicked = true;
204								start(e);
205								$(document).on(mousemove, zoom.move);
206								$(document).one('click.zoom',
207									function () {
208										stop();
209										clicked = false;

210										$(document).off(mousemove, zoom.move);
211									}
212								);
213								return false;
214							}
215						}
216					);
217				} else if (settings.on === 'toggle') {
218					$source.on('click.zoom',
219						function (e) {
220							if (clicked) {
221								stop();
222							} else {
223								start(e);
224							}
225							clicked = !clicked;
226						}
227					);
228				} else if (settings.on === 'mouseover') {
229					zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.
230
231					$source
232						.on('mouseenter.zoom', start)
233						.on('mouseleave.zoom', stop)
234						.on(mousemove, function(){
235							if (settings.longtouchtimer){
236								clearTimeout(settings.longtouchtimer);
237							}
238							zoom.move()
239						});
240				}
241
242				// Touch fallback
243				if (settings.touch) {
244
245					touched=false
246					$source
247						.on('touchstart.zoom', function (e) {
248							clearTimeout(settings.longtouchtimer);
249							settings.longtouchtimer = setTimeout(function(){
250								if (touched) {
251									touched = false;
252									stop();
253								} else {
254									touched = true;
255									e.preventDefault();
256									start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
257								}
258							}, settings.touchduration); 
259						})
260						.on('touchmove.zoom', function (e) {
261							if(touched){
262								e.preventDefault();
263								zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
264							}
265							
266						})
267						.on('touchend.zoom', function (e) {
268								e.preventDefault();
269								if (settings.longtouchtimer){
270									clearTimeout(settings.longtouchtimer);
271								}
272								stop();
273								touched=false
274						});
275				}
276				
277				if ($.isFunction(settings.callback)) {
278					settings.callback.call(img);
279				}
280			};
281
282			img.src = settings.url;
283
284
285		});
286	};
287
288	$.fn.zoom.defaults = defaults;
289}(window.jQuery));
290
291
292
293
294
295
296