Magic Zoom™

Examples

Settings wizard

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:
Entire image:
Thumb change:
Selectors mouseover delay, ms:
Selectors effect:
Selectors effect speed, ms:

1. Choose your settings.
2. Click apply:

Your customised zoom and HTML are below.


Here's the code:

  1. <!-- Define Magic Zoom -->
  2. <a href="images/r1-red-3.jpg" class="MagicZoom" rel="" id="zoom" title="Red Yamaha YZF-R1"><img src="images/r1-red-2.jpg"/></a><br/>
  3.  
  4. <!-- Selector with standard title -->
  5. <a href="images/r1-red-3.jpg" rel="zoom-id:zoom;" rev="images/r1-red-2.jpg" title="Red Yamaha YZF-R1"><img src="images/r1-red-1.jpg"/></a>
  6. <!-- Selector with different title and resized zoom window -->
  7. <a href="images/r1-black-3.jpg" rel="zoom-id:zoom;zoom-width:600px;zoom-height:200px;" rev="images/r1-black-2.jpg" title="Black Yamaha YZF-R1"><img src="images/r1-black-1.jpg"/></a>
  8. <!-- Selector without title and with inverted opacity -->
  9. <a href="images/r1-blue-3.jpg" rel="zoom-id:zoom;opacity-reverse:true;show-title:false;" rev="images/r1-blue-2.jpg"><img src="images/r1-blue-1.jpg"/></a>