Magic Zoom™

Buy now Get support

Use the settings wizard to try out the many customizations.

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