Magic Magnify Plus™

Examples

Settings wizard

Buy now  £39 Get support

Change the settings and click Update. The source code is shown underneath.

Choose your settings
border-color
border-width
progress-color
progress-height
magnifier
magnifier-size
    magnifier-size-x
    magnifier-size-y
magnifier-effect
magnifier-filter
magnifier-simulate
magnifier-time
magnifier-border-color
magnifier-border-width
lense-url
lense-offset-x
lense-offset-y
lense-position
thumb-change
thumb-change-delay
thumb-change-time
change-time
wheel-effect
blur
transparency
hide-cursor
disable-expand


NOTE: Some features won't work offline. Use the online example instead.
Adidas Black Adidas Black

Adidas Blue

Adidas Red

Here's the code:

<link rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" type="text/css" media="screen, projection"/>
<script src="magicmagnifyplus.js" type="text/javascript"></script>

<a href="images/shoe_large.jpg" class="MagicMagnifyPlus" id="Magnifier1"><img alt="Adidas Black" src="images/shoe_small.jpg"/></a> <br/>
<!-- selectors -->     
<a href="images/shoe_large.jpg" rel="Magnifier1" rev="images/shoe_small.jpg" ><img alt="Adidas Black" src="images/sel.jpg"/></a>
<a href="images/shoe_large1.jpg" rel="Magnifier1" rev="images/shoe_small1.jpg" ><img alt="Adidas Blue" src="images/sel1.jpg"/></a>
<a href="images/shoe_large2.jpg" rel="Magnifier1" rev="images/shoe_small2.jpg" ><img alt="Adidas Red" src="images/sel2.jpg"/></a>