Parameters for Magic Zoom™
| Parameter |
Default |
Options |
Description |
| zoom-width |
300 |
|
Width of zoom window, px |
| zoom-height |
300 |
|
Height of zoom window, px |
| zoom-position |
right |
left / right / top / bottom / inner / custom |
Position of zoom window |
| zoom-distance |
15 |
|
Distance between small image and zoom window, px |
| smoothing |
true |
true / false |
Enable smooth zoom movement |
| smoothing-speed |
40 |
1-99 |
Speed of smoothing |
| opacity |
50 |
0-100 |
Opacity of hovered area |
| opacity-reverse |
false |
true / false |
Add opacity to background instead of hovered area |
| click-to-initialize |
false |
true / false |
Click to initialize Magic Zoom and download large image |
| click-to-activate |
false |
true / false |
Click to show the zoom |
| show-title |
top |
top / bottom / false |
Position of the image title in the zoom window |
| thumb-change |
click |
click / mouseover |
Multiple images change on click/mouseover |
| selectors-mouseover-delay |
200 |
|
Multiple images delay before switching thumbnails, ms |
| selectors-effect |
dissolve |
dissolve / fade / false |
Dissolve or cross fade thumbnail when switching thumbnails |
| selectors-effect-speed |
400 |
|
Selectors effect speed, ms |
| preload-selectors-small |
true |
true / false |
Multiple images, preload small images |
| preload-selectors-big |
false |
true / false |
Multiple images, preload large images |
| zoom-fade |
false |
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 |
| fps |
25 |
|
Frames per second for zoom effect |
| show-loading |
true |
true / false |
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 |
| 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 |
Parameters for Magic Thumb™
| Parameter |
Default |
Options |
Description |
| expand-speed |
500 |
0-10000 |
Expand duration (ms) |
| restore-speed |
|
0-10000 |
Restore duration (ms), optional |
| expand-effect |
linear |
linear / cubic / back / elastic / bounce |
Effect for expanding image |
| restore-effect |
auto |
auto / linear / cubic / back / elastic / bounce |
Effect for restoring image |
| expand-trigger |
click |
click / mouseover |
Trigger for the enlarge effect |
| expand-trigger-delay |
500 |
0-1000 |
Delay before mouseover triggers enlargement |
| restore-trigger |
auto |
auto / click / mouseout |
Trigger to restore image to its small state |
| expand-align |
screen |
screen / image |
Align image relative to screen or small image |
| expand-position |
center |
center / coordinates
examples: top:0, right:25 or bottom:100, left:100 |
Precise position of enlarged image (px) |
| image-size |
fit-screen |
fit-screen / original |
Size of the enlarged image |
| keep-thumbnail |
true |
true / false |
Show/hide thumbnail when image enlarged |
| click-to-initialize |
false |
true / false |
Click to fetch large image |
| background-color |
#000000 |
|
Background color behind large image |
| background-opacity |
0 |
0-100 |
Opacity of the background, 0 = disabled |
| background-speed |
200 |
0-10000 |
Duration of background fade (ms) |
| caption-source |
a:title |
span / img:alt / img:title / a:title / #id |
Source of caption text |
| caption-speed |
250 |
0-10000 |
Speed of caption slide effect (ms) |
| caption-position |
bottom |
bottom / right / left |
Where to position the caption |
| caption-height |
300 |
|
Max height of bottom caption (px) |
| caption-width |
300 |
|
Max width of left/right caption (px) |
| buttons |
show |
show / hide / autohide |
Whether or not to show buttons |
| buttons-position |
auto |
auto / top left / top right / bottom left / bottom right |
Corner position of buttons |
| buttons-display |
previous, next, close |
previous / next / close |
Show all three buttons or just one or two |
| group |
|
any name |
Group images together into a set |
| slideshow-effect |
dissolve |
dissolve / fade / expand |
Slideshow effect to move between large images |
| slideshow-speed |
500 |
0-10000 |
Speed of slideshow effect (ms) |
| slideshow-loop |
true |
true / false |
Restart slideshow after last image |
| link |
|
http://www.example.com |
Link enlarged image to a URL |
| link-target |
_self |
_blank / _self / _parent / _top |
Open link in browser window/frame |
| thumb-id |
|
id of main image |
Choose related images for multiple image swapping |
| swap-image |
click |
click / mouseover |
Method to switch between multiple images |
| swap-image-delay |
100 |
0-1000 |
Delay before switching images (ms) |
| show-loading |
true |
true / false |
Show or not loading box |
| loading-msg |
Loading... |
|
Text of the loading message |
| loading-opacity |
75 |
0-100 |
Opacity of the loading box |
| keyboard |
true |
true / false |
Ability to use keyboard shortcuts |
| keyboard-ctrl |
false |
true / false |
Require the Ctrl key to permit shortcuts |
| css-class |
|
any name |
Apply different styles to different images |
| z-index |
10001 |
|
The z-index for the enlarged image |