Magic Toolbox

Magic Zoom™ wizard

Build your perfect Magic Zoom™ below!

Adjust the settings in the form, then copy the HTML.

Change design:

Choose your settings, then click apply:

Buy now Single license £29

Download Free trial

User experience
Opacity, 0-100
Opacity reverse
Smoothing
Smoothing speed, 0-100
FPS
Show title
Zoom fade
Zoom fade-in speed, ms
Zoom fade-out speed, ms
Geometry
Zoom width, px
Zoom height, px
Zoom distance, px
Zoom position
Zoom mode
Drag mode
Move on click
Preserve position
x, px
y, px
Click to activate
Thumb change
Mouseover delay ms



Your personalized zoom is above.
Your HTML is below.

Here's your code:

  1. <!-- Define Magic Zoom -->
  2. <a href="img/hdred-big.jpg" class="MagicZoom" rel="" id="zoom" title="Red harley"><img src="img/hdred-small.jpg"/></a><br/>
  3.  
  4. <!-- Selector with standard title -->
  5. <a href="img/hdred-big.jpg" rel="zoom-id:zoom;" rev="img/hdred-small.jpg" title="Red harley"><img src="img/hdred-color.jpg"/></a>
  6. <!-- Selector with different title and resized zoom window -->
  7. <a href="img/hdgreen-big.jpg" rel="zoom-id:zoom;zoom-width:600px;zoom-height:200px;" rev="img/hdgreen-small.jpg" title="Green harley"><img src="img/hdgreen-color.jpg"/></a>
  8. <!-- Selector without title and with inverted opacity -->
  9. <a href="img/hdblue-big.jpg" rel="zoom-id:zoom;opacity-reverse:true;show-title:false;" rev="img/hdblue-small.jpg"><img src="img/hdblue-color.jpg"/></a>


©2010 Magic Toolbox   About  |  Contact  |  Support  |  Affiliates  |  Newsletter  |  Testimonials  |  License Agreement  |  Terms  |  Privacy