annotate jquery.zoom.js @ 7:0f2b740536fb draft

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