Magic Zoom Plus™

Buy now Get support

Use the settings wizard to try out the many customizations.

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
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 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-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 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
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 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