Build your perfect zoom!

Also see more examples and the customization options.

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
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
Multiple images
Selectors change
Selectors mouseover delay, ms
Selectors effect
Selectors effect speed, ms
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:



Apply settings

Change design:

Copy and paste the code:

Apply your settings with either the rel attribute or via a <script> tag:

<!-- Define Magic Zoom Plus -->
<a href="images/big.jpg" class="MagicZoomPlus" rel="" id="zoom"><img src="images/small.jpg"/></a>
<!-- Thumbnails -->
<a href="images/big.jpg" rel="zoom-id: zoom;" rev="images/small.jpg" title="Red harley"><img src="images/tiny.jpg"/></a>
<a href="images/big-2.jpg" rel="zoom-id: zoom;" rev="images/small-2.jpg" title="Green harley"><img src="images/tiny-2.jpg"/></a>
<a href="images/big-3.jpg" rel="zoom-id: zoom;" rev="images/small-3.jpg"><img src="images/tiny-3.jpg"/></a>

<!-- Define Magic Zoom Plus options -->
<script type="text/javascript">
MagicZoomPlus.options = {
}
</script>
<!-- Define Magic Zoom Plus -->
<a href="images/big.jpg" class="MagicZoomPlus" id="zoom"><img src="images/small.jpg"/></a>
<!-- Thumbnails -->
<a href="images/big.jpg" rel="zoom-id: zoom;" rev="images/small.jpg" title="Red harley"><img src="images/tiny.jpg"/></a>
<a href="images/big-2.jpg" rel="zoom-id: zoom;" rev="images/small-2.jpg" title="Green harley"><img src="images/tiny-2.jpg"/></a>
<a href="images/big-3.jpg" rel="zoom-id: zoom;" rev="images/small-3.jpg"><img src="images/tiny-3.jpg"/></a>