Magic Zoom Plus™

Examples

Magic Zoom Plus™

Buy now  £39 Get support

Parameters for Magic Zoom Plus™
Parameter Default Options Description
hotspots any name ID of the DIV element that contains Hotpots definitions
disable-zoom false true / false Disable zoom effect
disable-expand false true / false Disable expand effect
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