Parameters for Magic Zoom Plus™
Parameter |
Default |
Options |
Description |
User experience |
disable-zoom |
false |
true / false |
Enlarge the image on click only |
disable-expand |
false |
true / false |
Zoom the image on hover only |
right-click |
false |
true / original / expanded / false |
Show right-click menu on the image |
hotspots |
|
any text |
The id of the div with your hotspots |
Positioning & Geometry |
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 to zoom window, px |
expand-size |
fit-screen |
fit-screen / original / width / height
e.g. expand-size: width=500; or expand-size: height=300; |
Size of the expanded image (new in 4.0) |
expand-align |
screen |
screen / image |
Align the expanded image relative to screen or small image |
expand-position |
center |
center / coordinates
e.g. expand-position: top=0, right=25; or expand-position: bottom=100, left=100; |
Precise position of the expanded image, px |
Effects |
opacity |
50 |
0-100 |
Opacity of hovered area |
opacity-reverse |
false |
true / false |
Add opacity outside mouse box |
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 |
zoom-window-effect |
shadow |
shadow / glow / false |
Apply shadow or glow on a zoom window |
expand-speed |
500 |
0-10000 |
Expand duration, ms |
restore-speed |
|
0-10000 |
Restore duration, ms (optional) |
expand-effect |
back |
linear / cubic / back / elastic / bounce |
Effect for expanding image |
restore-effect |
auto |
linear / cubic / back / elastic / bounce |
Effect for restoring image |
keep-thumbnail |
true |
true / false |
Show/hide thumbnail when image expanded |
expand-trigger |
click |
click / mouseover |
Trigger for the expand effect |
expand-trigger-delay |
200 |
0-1000 |
Delay before mouseover triggers expansion, ms |
restore-trigger |
auto |
auto / click / mouseout |
Trigger for the shrink effect |
fps |
25 |
|
Frames per second for zoom effect |
Multiple images |
selectors-change |
click |
click / mouseover |
Method to switch between multiple images |
selectors-mouseover-delay |
60 |
|
Delay before switching thumbnails, ms |
selectors-effect |
dissolve |
dissolve / fade / pounce/ false |
Dissolve, cross fade or pounce thumbnail when switching thumbnails |
selectors-effect-speed |
400 |
|
Speed of dissolve/fade effect, ms |
selectors-class |
|
any name |
Define a CSS class of the active selector |
zoom-id |
|
id of main image |
Choose multiple images to be swapped |
Hint |
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 |
Background |
background-color |
#000000 |
|
Background color behind the expanded image |
background-opacity |
30 |
0-100 |
Opacity of the background, 0 = disabled |
background-speed |
200 |
0-10000 |
Duration of background fade, ms |
Title & Caption |
show-title |
top |
top / bottom / false |
Show the title of the image in the zoom window |
title-source |
title |
title / #id |
Source of the title text |
caption-source |
a:title |
span / img:alt / img:title / a:title / #id |
Source of caption text under the expanded image |
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 |
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 |
Initialization |
initialize-on |
load |
load / click / mouseover |
How to initialize Magic Zoom Plus™ and download large image |
click-to-activate |
false |
true / false |
Click to show the zoom |
click-to-deactivate |
false |
true / false |
Allow click to hide the zoom window |
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 |
Zoom mode |
drag-mode |
false |
true / false |
Click and drag to move the zoom |
move-on-click |
true |
true / false |
Click to move the zoom (in drag mode) |
preserve-position |
false |
true / false |
Remember position of zoom for multiple images and drag mode |
x |
-1 |
|
Initial X-axis position for drag mode, -1 is center |
y |
-1 |
|
Initial 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.) |
fit-zoom-window |
true |
true / false |
Resize zoom window if big image is smaller than zoom window |
entire-image |
false |
true / false |
Show the entire large image on hover |
Expand mode |
pan-zoom |
true |
true / false |
Expand image then zoom |
slideshow-effect |
dissolve |
dissolve / fade / expand |
Slideshow effect from one image to next |
slideshow-speed |
500 |
0-10000 |
Speed of slideshow effect, ms |
slideshow-loop |
true |
true / false |
Restart slideshow after last image |
group |
|
any name |
Group images together into a set |
link |
|
http://www.example.com |
Link the expanded image to a URL |
link-target |
_self |
_blank / _self / _parent / _top |
Open link in browser window/frame |
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 expanded image |