Parameters for Magic Zoom™
| Parameter |
Default |
Options |
Description |
| zoom-width |
300 |
<length> or <percentage>
e.g. zoom-width: 400; or zoom-width: 100%;
|
Width of zoom window, px or % |
| zoom-height |
300 |
<length> or <percentage>
e.g. zoom-height: 400; or zoom-height: 100%;
|
Height of zoom window, px or % |
| zoom-position |
right |
left / right / top / bottom / inner / #id |
Position of zoom window |
| zoom-align |
top |
right / left / top / bottom / center |
How to align zoom window to an image |
| zoom-distance |
15 |
|
Distance from small image and zoom window, px |
| smoothing |
true |
true / false |
Enable smooth zoom movement |
| smoothing-speed |
40 |
1-99 |
Speed of smoothing |
| zoom-fade |
true |
true / false |
Zoom window fade effect |
| zoom-fade-in-speed |
400 |
|
Zoom window fade-in speed, ms |
| zoom-fade-out-speed |
200 |
|
Zoom window fade-out speed, ms |
| opacity |
50 |
0-100 |
Opacity of hovered area |
| opacity-reverse |
false |
true / false |
Add opacity to background instead of hovered area |
| zoom-window-effect |
shadow |
shadow / glow / false |
Apply shadow or glow on a zoom window |
| initialize-on |
load |
load / click / mouseover |
How to initialize Magic Zoom and download large image |
| click-to-activate |
false |
true / false |
Require click to show the zoom window |
| click-to-deactivate |
false |
true / false |
Allow click to hide the zoom window |
| show-title |
top |
top / bottom / false |
Position of the image title in the zoom window |
| title-source |
title |
title / #id |
Source of the title text |
| selectors-change |
click |
click / mouseover |
Method to switch between multiple images |
| selectors-mouseover-delay |
60 |
1-1000 |
Delay before switching multiple images, ms |
| selectors-effect |
dissolve |
dissolve / fade / pounce/ false |
Dissolve, cross fade or pounce thumbnail when switching thumbnails |
| selectors-effect-speed |
400 |
|
Selectors effect speed, ms |
| selectors-class |
|
any name |
Define a CSS class of the active selector |
| preload-selectors-small |
true |
true / false |
Multiple images, preload small images |
| preload-selectors-big |
false |
true / false |
Multiple images, preload large images |
| show-loading |
true |
true / false |
Show loading message |
| loading-msg |
Loading zoom... |
|
Loading message text |
| loading-opacity |
75 |
0-100 |
Loading message opacity |
| loading-position-x |
-1 |
|
Loading message X-axis position, -1 is center |
| loading-position-y |
-1 |
|
Loading message Y-axis position, -1 is center |
| hint |
true |
true / false |
Display a hint to suggest that image is zoomable |
| hint-text |
Zoom |
|
Show text in the hint |
| hint-position |
tl |
tl / tr / tc / bl / br / bc |
Position of the hint, top left, top right, etc. |
| hint-opacity |
75 |
0-100 |
Opacity of the hint text/image |
| drag-mode |
false |
true / false |
Click and drag to move the zoom |
| move-on-click |
true |
true / false |
Click alone will also move zoom (drag mode only) |
| x |
-1 |
|
Initial zoom X-axis position for drag mode, -1 is center |
| y |
-1 |
|
Initial zoom Y-axis position for drag mode, -1 is center |
| always-show-zoom |
false |
true / false |
Make zoom window always visible. (Automatically true in drag-mode.) |
| preserve-position |
false |
true / false |
Position of zoom can be remembered for multiple images and drag mode |
| fit-zoom-window |
true |
true / false |
Resize zoom window if big image is smaller than zoom window |
| entire-image |
false |
true / false |
Show entire large image on hover |
| disable-zoom |
false |
true / false |
Disable the zoom effect (e.g. to swap images only) |
| right-click |
false |
true / false |
Show right-click menu on the image |
| fps |
25 |
|
Frames per second for zoom effect |