Magic Zoom™ wizard

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



Your personalized zoom is above.
Your HTML is below.

Here's your code:

Inline declaration:

  • <!-- Define Magic Zoom -->
  • <a href="big.jpg" class="MagicZoom" rel="" id="zoom"><img src="small.jpg"/></a>

Alternative declaration:

  • <!-- Define Magic Zoom options -->
  • <script type="text/javascript">
  • MagicZoom.options = {
  • }
  • <script />
  • <!-- Define Magic Zoom -->
  • <a href="big.jpg" class="MagicZoom" id="zoom" ><img src="small.jpg"/></a>

Selectors code:

  • <!-- Selector with standard title -->
  • <a href="img/bike1-big.jpg" rel="zoom-id:zoom;" rev="img/bike1-small.jpg" title="Blue bike"><img src="img/bike1-tiny.jpg"/></a>
  • <!-- Selector with different title and resized zoom window -->
  • <a href="img/bike2-big.jpg" rel="zoom-id:zoom; zoom-width:600px; zoom-height:200px;" rev="img/bike2-small.jpg" title="Red bike"><img src="img/bike2-tiny.jpg"/></a>
  • <!-- Selector without title and with inverted opacity -->
  • <a href="img/bike3-big.jpg" rel="zoom-id:zoom; opacity-reverse:true; show-title:false;" rev="img/bike3-small.jpg"><img src="img/bike3-tiny.jpg"/></a>
Buy Now1 site license £29

30 day money-back guarantee.
Free license for non-commercial use

Download Free trial

30 minutes free technical support.

Payment

Pay by credit card or bank transfer, then download your product.

Payments: Visa, MasterCard, Maestro, Amex, Discover, Paypal, Google Checkout, Avangate

100% Support

30 minutes free technical support.

Guarantee

30 day money-back guarantee.