Settings wizard

Buy now Get support

Choose your settings then click Apply.

User experience
Disable zoom effect:
Disable expand effect:
Show right-click menu on the image:
Positioning & Geometry
Zoom width, px:
Zoom height, px:
Zoom position:
Zoom distance, px:
Zoom align:
Size of the expanded image:
Align expanded image relative to :
Precise position of expanded image, px:
Hint: top=0, left=0 / top=0, right=0 / bottom=100, left=100
Opacity, 0-100:
Opacity reverse:
Smoothing speed, 0-100:
Zoom fade:
Zoom fade-in speed, ms:
Zoom fade-out speed, ms:
Zoom window effect:
Expand duration, ms:
Restore duration, ms:
Effect for expanding image:
Effect for restoring image:
Show thumbnail when image expanded:
Trigger for the expand effect:
Delay before mouseover triggers expansion, ms:
Trigger to restore image to its small state:
Multiple images
Selectors change:
Selectors mouseover delay, ms:
Selectors effect:
Selectors effect speed, ms:
Zoom mode
Drag mode:
Move on click:
Preserve position:
x, px:
y, px:
Fit zoom window:
Entire image:
Expand mode
Pan zoom (expand then zoom):
Visual effect for switching expanded images:
Speed of slideshow effect, ms:
Restart slideshow after last image:
Hint text:
Hint position:
Hint opacity, 0-100:
Title & Caption
Show title:
Source of the title text :
Source of caption text:
Speed of caption slide effect, ms:
Where to position the caption:
Max height of bottom caption, px:
Max width of left/right caption, ms:
Background color behind large image:
Opacity of the background, 0-100 (0 = disabled):
Duration of background fade, ms:
Initialize Magic Zoom Plus™ on:
Click to activate:
Click to deactivate:
Loading message:
Loading message text:
Whether or not to show buttons:
Buttons position:
Which buttons to show:
  Previous button:
  Next button:
  Close button:

Choose size of buttons:

Choose prefer design:

Your customised zoom and HTML are below.

Here's the code:

  1. <a id="Zoomer" href="images/harley1c-large.jpg" class="MagicZoomPlus" rel="" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a> <br/>
  3. <a href="images/harley1c-large.jpg" rel="zoom-id: Zoomer" rev="images/harley1b.jpg"><img src="images/harley1a.jpg"/></a>
  4. <a href="images/harley2c.jpg" rel="zoom-id: Zoomer" rev="images/harley2b.jpg"><img src="images/harley2a.jpg"/></a>