Build your perfect Magic Zoom™ below!

Also see more examples and the installation instructions.

User experience
Opacity, 0-100
Opacity reverse
Smoothing
Smoothing speed, 0-100
FPS
Zoom window effect
Show title
Hint
Hint text
Hint position
Hint opacity, 0-100
Zoom fade
Zoom fade-in speed, ms
Zoom fade-out speed, ms
Show right-click menu on the image

Change design:

Zoom mode
Drag mode
Move on click
Preserve position
        x, px
        y, px
Click to activate
Click to deactivate
Swap image on
Mouseover delay, ms
Swap image effect
Swap image effect speed, ms
Disable zoom effect
Geometry
Zoom width, px
Zoom height, px
Zoom distance, px
Zoom position
Zoom align

Apply settings

Your personalized zoom is above.

Your HTML is below.

Copy and paste the code:

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

<!-- Define Magic Zoom -->
<a href="images/big.jpg" class="MagicZoom" rel="" id="zoom"><img src="images/bike1-small.jpg"/></a>
<!-- Thumbnails -->
<a href="images/bike1-big.jpg" rel="zoom-id: zoom;" rev="images/bike1-small.jpg" title="Red harley"><img src="images/tbike1-tiny.jpg"/></a>
<a href="images/bike2-big.jpg" rel="zoom-id: zoom;" rev="images/bike2-small.jpg" title="Green harley"><img src="images/bike2-tiny.jpg"/></a>
<a href="images/bike3-big.jpg" rel="zoom-id: zoom;" rev="images/bike3-small.jpg"><img src="images/bike3-tiny.jpg"/></a>

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