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