20 |
21 | 
22 |
23 |
24 |
25 |
26 | 
22 |
23 |
24 | 27 | 28 | 29 | 30 |
22 |
23 |
24 | 40 | jQuery image zoom plugin 41 |
42 |45 | EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS. 46 |
47 | 48 |49 | Download 50 | View project on GitHub 51 |
52 | 53 |63 | Use your mouse cursor or finger to zoom and pan the images below. 64 |
65 | 66 |
73 |
74 | 
86 |
87 | 
96 |
97 |
103 |
104 | 
108 |
109 | 
113 |
114 | 
118 |
119 |
129 |
130 | 134 | Photos all by Dag Endre Opedal. 135 |
136 | 137 |
151 | EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target element (<div class="easyzoom">) only contains a link to the large image and the smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements that are positioned absolutely.
152 |
<div class="easyzoom"> 156 | <a href="images/zoom.jpg"> 157 | <img src="images/standard.jpg" alt="" /> 158 | </a> 159 | </div>160 |
167 | The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by floating it or by displaying it as an inline block. Extra white space below the image (usually caused by the line box the image sits within) can be removed either by displaying it at block level or changing its position within the line box. 168 |
169 | 170 |
171 | Take a look at the included easyzoom.css for more information on styling EasyZoom.
172 |
/* Shrink wrap strategy 1 */ 176 | .easyzoom { 177 | float: left; 178 | } 179 | .easyzoom img { 180 | display: block; 181 | } 182 | 183 | 184 | /* Shrink wrap strategy 2 */ 185 | .easyzoom { 186 | display: inline-block; 187 | } 188 | .easyzoom img { 189 | vertical-align: bottom; 190 | }191 |
198 | The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via element data. EasyZoom is also AMD and CommonJS compatible. 199 |
200 | 201 |// Instantiate EasyZoom instances 203 | var $easyzoom = $('.easyzoom').easyZoom(); 204 | 205 | // Get an instance API 206 | var api = $easyzoom.data('easyZoom');207 |
219 | Global options can be specified via the standard jQuery plugin interface or as data attributes on individual EasyZoom elements. Remember that camelCase options should be written as hyphen-separated attributes, for example the preventClicks option would be defined on the element with the data-prevent-clicks attribute.
220 |
| Option | 226 |Default value | 227 |Description | 228 |
|---|---|---|
| loadingNotice | 233 |"Loading image" |
234 | 235 | The text to display within the notice box while loading the zoom image. 236 | | 237 |
| errorNotice | 240 |"The image could not be loaded" |
241 | The text to display within the notice box if an error occurs when loading the zoom image. | 242 |
| errorDuration | 245 |2500 |
246 | The time (in milliseconds) to display the error notice | 247 |
| linkAttribute | 250 |"href" |
251 | Attribute to retrieve the zoom image URL from. | 252 |
| preventClicks | 255 |true |
256 | Prevent clicks on the zoom image link. | 257 |
| onShow | 260 |$.noop |
261 | Callback function to execute when the flyout is displayed. | 262 |
| onMove | 265 |$.noop |
266 | Callback function to execute when the cursor is moved while over the image. | 267 |
| onHide | 270 |$.noop |
271 | Callback function to execute when the flyout is removed. | 272 |
.show([MouseEvent|TouchEvent], [Boolean])
288 | .hide()
297 | .teardown()
303 | .swap(standardSrc, zoomSrc, [srcset])
309 | 
321 |
322 |
323 |
324 |
325 |
356 |
357 |
358 |
359 |
--------------------------------------------------------------------------------
/test/lib/jquery-3.6.0.min.js:
--------------------------------------------------------------------------------
1 | /*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0