Magic Zoom Plus™

Examples

Settings wizard

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

Effects

Opacity, 0-100:
Opacity reverse:
Smoothing:
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

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

Background color behind large image:
Opacity of the background, 0-100 (0 = disabled):
Duration of background fade, ms:

Initialization

Initialize Magic Zoom Plus™ on:
Click to activate:
Click to deactivate:
Loading message:
Loading message text:

Buttons

Whether or not to show buttons:
Buttons position:
Which buttons to show:
Tooltips
Previous button:
Next button:
Close button:
Choose size of buttons: Choose prefer design:

Your customised zoom and HTML are below.

Here's the code:

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