Build your perfect Magic Zoom™ below!

Also see more examples and the installation instructions.

User experience
How to zoom image
How to show expanded view
How to zoom image in expanded view
Whether to allow changing zoom ratio with mouse wheel
Whether to allow context menu on right click
Geometry
Width of zoom window
Height of zoom window
Distance from small image to zoom window
Position of zoom window
Whether to scale up the large image if its original size is not enough for a zoom effect
Initialization and activation
When activate zoom
When and how activate zoom in expanded view. 'always' - zoom automatically activates upon entering the expanded view and remains active.
Whether to close expanded view on click outside the image
Whether to load large image on demand (on first activation)
Whether to start Zoom on image automatically on page load or manually

Change design:

Multiple images
Mouse event used to swtich between multiple images
Whether to enable dissolve effect when switching between images
Caption, hint and titles
Position of caption on zoomed image
Whether to show caption in expanded view
How to show hint
Hint that shows when zoom mode is enabled, but inactive. Zoom activates on hover (zoomOn: hover)
Hint that shows when zoom mode is enabled, but inactive. Zoom activates on click (zoomOn: click)
Hint that shows when zoom is active and expand mode is available.
Title of close button
Title of next button
Title of previous button
Special settings for mobile
How to zoom image
Hint that shows when zoom mode is enabled, but inactive. Zoom activates on touch,
Hint that shows when zoom mode is enabled, but inactive. Zoom activates on double tap.
Hint that shows when zoom is active and expand mode is available.
Miscellaneous
Extra CSS class(es) to apply to zoom instance

Apply settings


Copy and paste the code:

Apply your settings with either the data-options attribute or via a <script> tag: