https://u-1.at/js/zoom_gallery.js

1/*
2	jQuery Zoom v1.7.1 - 2013-03-12
3	(c) 2013 Jack Moore - jacklmoore.com/zoom
4	license: http://www.opensource.org/licenses/mit-license.php
5*/
6(function ($) {
7	var defaults = {
8		url: false,
9		callback: false,
10		target: false,
11		duration: 120,
12		on: 'mouseover' // other options: 'grab', 'click', 'toggle'
13	};
14
15	// Core Zoom Logic, independent of event listeners.
16	$.zoom = function(target, source, img) {
17		var outerWidth,
18			outerHeight,
19			xRatio,
20			yRatio,
21			offset,
22			position = $(target).css('position');
23
24		// The parent element needs positioning so that the zoomed element can be correctly positioned within.
25		$(target).css({
26			position: /(absolute|fixed)/.test() ? position : 'relative',
27			overflow: 'hidden'
28		});
29
30		$(img)
31			.addClass('zoomImg')
32			.css({
33				position: 'absolute',
34				top: 0,
35				left: 0,
36				opacity: 0,
37				width: img.width,
38				height: img.height,
39				border: 'none',
40				maxWidth: 'none'
41			})
42			.appendTo(target);
43
44		return {
45			init: function() {
46				outerWidth = $(target).outerWidth();
47				outerHeight = $(target).outerHeight();
48				xRatio = (img.width - outerWidth) / $(source).outerWidth();
49				yRatio = (img.height - outerHeight) / $(source).outerHeight();
50				offset = $(source).offset();
51			},
52			move: function (e) {
53				var left = (e.pageX - offset.left),
54					top = (e.pageY - offset.top);
55
56				top = Math.max(Math.min(top, outerHeight), 0);
57				left = Math.max(Math.min(left, outerWidth), 0);
58
59				img.style.left = (left * -xRatio) + 'px';
60				img.style.top = (top * -yRatio) + 'px';
61			}
62		};
63	};
64
65	$.fn.zoom = function (options) {
66		return this.each(function () {
67			var
68			settings = $.extend({}, defaults, options || {}),
69			//target will display the zoomed iamge
70			target = settings.target || this,
71			//source will provide zoom location info (thumbnail)
72			source = this,
73			img = new Image(),
74			$img = $(img),
75			mousemove = 'mousemove',
76			clicked = false;
77
78			// If a url wasn't specified, look for an image element.
79			if (!settings.url) {
80				settings.url = $(source).find('img').attr('src');
81				if (!settings.url) {
82					return;
83				}
84			}
85
86			img.onload = function () {
87				var zoom = $.zoom(target, source, img);
88
89				function start(e) {
90					zoom.init();
91					zoom.move(e);
92
93					// Skip the fade-in for IE8 and lower since it chokes on fading-in
94					// and changing position based on mousemovement at the same time.
95					$img.stop()
96					.fadeTo($.support.opacity ? settings.duration : 0, 1);
97				}
98
99				function stop() {
100					$img.stop()
101					.fadeTo(settings.duration, 0);
102				}
103
104				if (settings.on === 'grab') {
105					$(source).on('mousedown',
106						function (e) {
107							$(document).one('mouseup',
108								function () {
109									stop();
110
111									$(document).off(mousemove, zoom.move);
112								}
113							);
114
115							start(e);
116
117							$(document).on(mousemove, zoom.move);
118
119							e.preventDefault();
120						}
121					);
122				} else if (settings.on === 'click') {
123					$(source).on('click',
124						function (e) {
125							if (clicked) {
126								// bubble the event up to the document to trigger the unbind.
127								return;
128							} else {
129								clicked = true;
130								start(e);
131								$(document).on(mousemove, zoom.move);
132								$(document).one('click',
133									function () {
134										stop();
135										clicked = false;
136										$(document).off(mousemove, zoom.move);
137									}
138								);
139								return false;
140							}
141						}
142					);
143				} else if (settings.on === 'toggle') {
144					$(source).on('click',
145						function (e) {
146							if (clicked) {
147								stop();
148							} else {
149								start(e);
150							}
151							clicked = !clicked;
152						}
153					);
154				} else {
155					zoom.init(); // Pre-emptively call init because IE7 will fire the mousemove handler before the hover handler.
156
157					$(source)
158						.on('mouseenter', start)
159						.on('mouseleave', stop)
160						.on(mousemove, zoom.move);
161				}
162
163				if ($.isFunction(settings.callback)) {
164					settings.callback.call(img);
165				}
166			};
167
168			img.src = settings.url;
169		});
170	};
171
172	$.fn.zoom.defaults = defaults;
173}(window.jQuery));