| position |
right |
Position of zoom output window, one of the next properties is available “top”, “left”, “right”, “bottom”, “inside”, “lens”, “#ID”. |
| mposition |
inside |
Position of zoom output window in adaptive mode (i.e. for mobile devices) available properties: “inside”, “fullscreen” |
| rootOutput |
true |
In the HTML structure, this option gives an ability to output xzoom element, to the end of the document body or relative to the parent element of main source image. |
| Xoffset |
0 |
Zoom output window horizontal offset in pixels from output base position. |
| Yoffset |
0 |
Zoom output window vertical offset in pixels from output base position. |
| fadeIn |
true |
Fade in effect, when zoom is opening. |
| fadeTrans |
true |
Fade transition effect, when switching images by clicking on thumbnails. |
| fadeOut |
false |
Fade out effect, when zoom is closing. |
| smoothZoomMove |
3 |
Smooth move effect of the big zoomed image in the zoom output window. The higher value will make movement smoother. |
| smoothLensMove |
1 |
Smooth move effect of lens. |
| smoothScale |
6 |
Smooth move effect of scale. |
| defaultScale |
0 |
You can setup default scale value of zoom on opening, from -1 to 1. Where -1 means -100%, and 1 means 100% of lens scale. |
| scroll |
true |
Scale on mouse scroll. |
| tint |
false |
Tint color. Color must be provided in format like “#color”. We are not recommend you to use named css colors. |
| tintOpacity |
0.5 |
Tint opacity from 0 to 1. |
| lens |
false |
Lens color. Color must be provided in format like “#color”. We are not recommend you to use named css colors. |
| lensOpacity |
0.5 |
Lens opacity from 0 to 1. |
| lensShape |
box |
Lens shape “box” or “circle”. |
| lensCollision |
true |
Lens will collide and not go out of main image borders. This option is always false for position “lens”. |
| lensReverse |
false |
When selected position “inside” and this option is set to true, the lens direction of moving will be reversed. |
| zoomWidth |
auto |
Custom width of zoom window in pixels. |
| zoomHeight |
auto |
Custom height of zoom window in pixels. |
| sourceClass |
xzoom-source |
Class name for source “div” container. |
| loadingClass |
xzoom-loading |
Class name for loading “div” container that appear before zoom opens, when image is still loading. |
| lensClass |
xzoom-lens |
Class name for lens “div”. |
| zoomClass |
xzoom-preview |
Class name for zoom window(div). |
| activeClass |
xactive |
Class name that will be added to active thumbnail image. |
| hover |
false |
With this option you can make a selection action on thumbnail by hover mouse point on it. |
| adaptive |
true |
Adaptive functionality. |
| adaptiveReverse |
false |
Same as lensReverse, but only available when adaptive is true. |
| title |
false |
Output title/caption of the image, in the zoom output window. |
| titleClass |
xzoom-caption |
Class name for caption “div” container. |
| bg |
false |
Zoom image output as background, works only when position is set to “lens”. |