Magic Zoom™
Overview
Parameters
Settings wizard
Examples
Default parameters
Dimensions
Multiple images
Zoom positions
Zoom alignment
Zoom fade/smoothing
Opacity
Hint
Title
CSS styling
Entire image
Activate/Initialize
Drag mode
Disable zoom
Right click
Global options
Magic Zoom™ API
Settings wizard
Buy now
Get support
Choose your settings then click Apply.
User experience
Opacity, 0-100:
Opacity reverse:
Smoothing:
Smoothing speed, 0-100:
FPS:
Zoom window effect:
shadow
glow
false
Show title:
top
bottom
false
Hint:
Yes
No
Hint text:
Hint position:
top left (tl)
top right (tr)
top center (tc)
bottom left (bl)
bottom right (br)
bottom center (bc)
Hint opacity, 0-100:
Zoom fade:
Zoom fade-in speed, ms:
Zoom fade-out speed, ms:
Show right-click menu on the image:
Geometry
Zoom width, px:
Zoom height, px:
Zoom distance, px:
Zoom position:
right
left
top
bottom
inner
Zoom align:
top
right
left
bottom
center
Adjust zoom position to fit screen:
Zoom mode
Drag mode:
Move on click:
Preserve position:
x, px:
y, px:
Click to activate:
Click to deactivate:
Entire image:
Selectors change:
click
mouseover
Selectors mouseover delay, ms:
Selectors effect:
dissolve
fade
pounce
false
Selectors effect speed, ms:
Disable zoom effect:
No
Yes
Apply
Your customised zoom and HTML are below.
Here's the code:
<!-- Define Magic Zoom -->
<
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
/
>
<!-- Selector with standard title -->
<
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
>
<!-- Selector with different title and resized zoom window -->
<
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
>
<!-- Selector without title and with inverted opacity -->
<
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
>