Magic Zoom Plus™

It zooms on hover and it enlarges on click.

It combines our two most popular effects: Magic Zoom™ and Magic Thumb™.


You can adjust these 25 different parameters to suit your website.

Parameters for Magic Zoom™ (more customisation instructions)
Parameter Default value Description
opacity 50 Opacity of the box as you hover on the small image
thumb-change click Method of switching between multiple images. Possible values: click/mouseover
zoom-width 300px Width of the zoomed window in pixels
zoom-height 300px Height of the zoomed window in pixels
zoom-position right Zoom window position. Possible values: right/left/top/bottom/inner/custom
drag-mode false Require the user to click and drag the box to move the zoom (instead of hover). Possible values: true/false
always-show-zoom false Set the zoom window to be always visible. Possible values: true/false
Parameters for Magic Thumb™ (more customisation instructions)
Parameter Default value Description
fitToScreen true Scale the image down to fit the users screen without scrolling. Possible values: true/false
duration 0.5 Define how long the zoom effect takes (in seconds). Alternatively, use zoomDuration and restoreDuration to set different values for enlarge and collapse effects.
zoomDuration 0.5 Enlarge effect duration (in seconds).
restoreDuration 0.5 Collapse effect duration (in seconds).
zoomPosition 'center' How the image should expand. Center will expand to the centre of the screen. Auto will expand over the small image.
zoomTrigger 'click' Method of enlarging image, possible values: 'click'/'mouseover'.
zoomTriggerDelay 0.5 If the zoomTrigger is set to mouseover, you can specify a delay before the image enlarges.
keepThumbnail false Keep the thumbnail visible when the image is enlarged, possible values: true/false.
captionSrc 'span' Source for the text in the caption underneath the enlarged image. Possible values:
  • 'span' - text will be taken from the <span> element inside the link.
  • 'img:alt' - text will be taken from the alt attribute of the image.
  • 'img:title' - text will be taken from the title attribute of the image.
captionSlideDuration 0.25 Duration of the caption's slide effect (in seconds).
backgroundFadingOpacity 0 A popular effect to make the background darker/lighter. Possible values between 0 and 1
backgroundFadingColor '#000000' Background color of darkening/lightening background effect.
backgroundFadingDuration 0.2 Defines how long the background fade effect takes (in seconds).
controlbarEnable true Shows the control bar with forward, back and close buttons. Possible values: true/false.
controlbarPosition 'top right' Defines the position of the control bar. Possible values: 'top right' / 'top left' / 'bottom right' / 'bottom left'
allowKeyboard true Use keyboard shortcuts to navigate between images. Possible values: true/false.
useCtrlKey false Require to use Ctrl key with keyboard shortcuts to navigate between images. Possible values: true/false.
zIndex 1001 Sets the stack order of the enlarged image. 1001 should normally bring it to the front.