Responsive Image Zoom Demo
--- A jQuery plugin for image zoom for responsive websites and touch-enabled devices!!
Demo
Demo 1 with image slider and fancybox
˂
˃
Demo 2 with single image and without fancybox
Options
| Property Name | Type | Description | Default Value |
|---|---|---|---|
| zoomImage | string | Path to the zoom image. If no zoom image is specified, the small image (as specifed in the image element) will be used. | "" |
| tintColor | string | Color to use for the tint effect | #fff |
| tintOpacity | number | Opacity of tint 0-1. If zero, no tint will be visible. | 0.25 |
| animationTime | number | Duration of the animation effects in milliseconds. | 500 |
| lensClass | string | CSS class to use for lens. | responsivezoom-lens |
| easeTime (DEPRECATED V3.0) | number | Number of milliseconds of mouse easing movement of zoom image. The bigger the number, the more easing. Zero means no easing. | 500 |
| zoomMatchSize - DEPRECATED (see zoomSizeMode) | boolean | Automatically sizes the zoom image to match the page image. | false |
| zoomPosition | number | string | Specifies position of zoom window. If numeric (0-15), position is relative to page image as
shown by the following key (blue squares represent zoom window):
If a string is supplied, value will be used as a selector to pinpoint the exact position and size of an element in the page.
If the value "inside" is specified, the zoom image
will appear inside the page image. |
3 |
| zoomOffsetX | number | Allows you to fine tune horizontal position of zoom,also works in 'inside' mode | 15 |
| zoomOffsetY | number | Allows you to fine tune vertical position of zoom, also works in 'inside' mode | 0 |
| zoomFullSize DEPRECATED (see zoomSizeMode) | boolean | Zoom window appears at full size of zoom image. | false |
| zoomFlyOut | boolean | Turns 'flying' zoom animation on or off. | true |
| zoomClass | string | CSS class to use for zoom window. | responsivezoom-zoom |
| zoomInsideClass | string | CSS class to use for zoom window when "inside" has been used for zoomPosition. |
responsivezoom-zoom-inside |
| zoomSizeMode | string | Defines the rule for sizing the zoom window and lens.
|
lens |
| captionSource | string | Specify an HTML attribute in the page image to be used as text for the caption. Otherwise, specify a selector to some HTML content to use for the caption, or 'none' to switch off captions. | title |
| captionType | string | Specify caption type, either "attr" or "html". | attr |
| captionPosition | string | Position of caption, "top" or "bottom". | top |
| uriEscapeMethod | boolean | string | Use of special characters or spaces in paths to images is not recommended. However, sometimes you may not have control over this. You can specify a character escape method for the image paths. Specify the JavaScript escaping method to use, either "escape" or "encodeURI" (false = no escaping). | false |
| errorCallback | function | Specify a function to call when an error occurs. Your function will receive an error object with the following properties:
ResponsiveZoom.quickStart() e.g:
ResponsiveZoom.quickStart();
|
function(error){} |
| variableMagnification | boolean | Whether to allow variable magnification | true |
| startMagnification | string|number | Initial magnification (multiplier of small image size, do not put quotes around numbers). "auto" will choose best quality magnification based on large image size. |
auto |
| minMagnification | string|number | Minimum allowable magnification (multiplier of small image size). "auto" will ensure lens size does not get larger than small image. |
auto |
| maxMagnification | string|number | Maximum allowable magnification (multiplier of small image size). "auto" will choose best quality magnification based on large image size. |
auto |
| easing | number | Higher the number, the smoother/slower the easing of movement. | 8 |
| lazyLoadZoom | boolean | Lazy load the zoom image. If true, zoom image will only be loaded after initial interaction with small image, otherwise will be loaded immediately on page load. Lazy loading can be useful if there are many zoom images that need to be loaded. | false |
| mouseTriggerEvent | string | Mouse event used to trigger zoom. Use either "mousemove" or "click". | mousemove |
| disableZoom | string|boolean | Use to disable zoom. false = no disable, true = disable always, "auto" = disable only if zoom image is the same size or smaller than small image. Note, if you have set magnification levels larger than 1, zoom will not be disabled. | false |
| disableOnScreenWidth | number | Use to disable zoom if page size less than or equal to specified value. Useful for disabling zoom on small mobile devices. Gallery elements will still function and change the image. | 0 |
| galleryFade | boolean | Turns gallery fade effect on or off. If you are using mouseover for changing gallery images, false is recommended. | true |
| galleryHoverDelay | number | Number of milliseconds to delay changing of images when using galleryEvent:'mouseover'.
Stops flooding browser with image load requests.
|
200 |
| permaZoom | boolean | If true, zoom window will remain open when mouse moves out of small image. | false |
| zoomWidth zoomHeight |
number | Specifies zoom window size (lens size adjusted). Overrides any CSS size. | 0 |
| lensWidth lensHeight |
number | Specifies lens size (zoom window size adjusted). Overrides any CSS size. | 0 |
| hoverIntentDelay | number | Specifies the amount of time (milliseconds) that slow movement must be made to trigger zoom. A good value is 100. Zero means no hover intent. | 0 |
| hoverIntentDistance | number | Specifies the distance moved in pixels that would be classed as slow. | 2 |
| autoInside | number | If the page size becomes less than or equal to the specified width (pixels) Responsive Zoom will work in 'inside' mode. | 0 |
| touchStartDelay | boolean | Allow normal page touch-scrolling to work when images take up full device width.
Boolean, true or false to enable the feature. |
0 |
