Build your perfect Zoom

Zoom experience
Zoom style
When to activate zoom
Width of zoom window
Height of zoom window
Position of zoom window
Distance to zoom window
Smooth zoom movement
OFFON
Change zoom level on mousewheel
OFFON
Scale-up image if too small
OFFON
Position of caption in zoom window
Multiple images
How to swap images
Dissolve between images
OFFON
Hint
When to show hint
Text hint (hover)
Text hint (click)
Miscellaneous
Activate on page load
OFFON
Load on click
OFFON
Right-click menu
OFFON
Extra CSS class(es)
Mobile settings
Zoom style
Text hint (touch)
Text hint (double-tap)

Apply settings

<!-- Main zoom image -->
<a class="MagicZoom" id="zoom" title="..." href="large-1.jpg"><img src="small-1.jpg"></a>

<!-- Thumbnails -->
<a data-zoom-id="zoom" href="large-1.jpg" data-image="small-1.jpg" title="..."><img src="tiny-1.jpg"></a>
<a data-zoom-id="zoom" href="large-2.jpg" data-image="small-2.jpg" title="..."><img src="tiny-2.jpg"></a>
<a data-zoom-id="zoom" href="large-3.jpg" data-image="small-3.jpg" title="..."><img src="tiny-3.jpg"></a>
<script>
var mzOptions = {
};
</script>

Also see more examples and the installation instructions.