Magic Magnify™ integration
£19
$32 / €23
It's easy to add Magic Magnify™ to your website:
- Download Magic Magnify™ - get the trial version or buy the full version.
- Upload magicmagnify.js and magicmagnify.swf to a folder on your server.
- Reference magicmagnify.js in the <head> of your page.
- Reference your small image with <img>, link it with <a> to your big image and add a CSS class of "MagicMagnify".
- Finished!
Your code should look something like this:
<html>
<head>
<title>Magic Magnify demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="magicmagnify.js" type="text/javascript"></script>
</head>
<body>
<a href="big.jpg" class="MagicMagnify"><img src="small.jpg"/></a>
</body>
</html>
Customization
Lots of options can be changed to suit your website. See below or try more examples.
Border color
Change the border color by adding a zoom-color to the the rel attribute to your <a> tag. The default color is #9E2F2D. Example code:
<a href="big.jpg" rel="zoom-color: #6e8c0e" class="MagicMagnify"><img src="small.jpg"/></a>
Magnifier size
Change the magnifier size by adding a size to the rel attribute. The default size is 100px. Example code:
<a href="big.jpg" rel="zoom-color: #6e8c0e; size: 200px" class="MagicMagnify"><img src="small.jpg"/></a>
Magnifier shape
Change the magnifier shape to a square by adding a type to the rel attribute. The default shape is circle. Example code:
<a href="big.jpg" rel="zoom-color: #6e8c0e; size: 200px; type: square" class="MagicMagnify"><img src="small.jpg"/></a>
Magnifier image
Create your own image to replace the standard circle or square. See example.
List of parameters
Optional paramaters for customising Magic Magnify™.
| Parameter name | Default value | Description |
|---|---|---|
| type | circle | Magnifier shape (circle|square) |
| size | 100 | Magnifier size (or use sizeX / sizeY) |
| sizeX | 100 | Magnifier width |
| sizeY | 100 | Magnifier height |
| zoom-color | #6E8C0E | Magnifier border color |
| border-color | #6E8C0E | Outside border color |
| line-thickness | 1 | Magnifier border thickness |
| line-thickness-border | 0 | Outside border thickness |
| lenseUrl | Custom image URL | |
| lenseOffsetX | 0 | Custom image x-offset |
| lenseOffsetY | 0 | Custom image y-offset |
| lensePosition | top | Custom image position (top|bottom) |
| linkUrl | URL the image should link to (if any) | |
| linkWindow | _self | Page where the link should load (_self|_blank|_parent|_top) |
| disableAutoStart | false | Disable magnify effect until clicked (false|true) |
To get help, visit our support forum. All customers get 30 minutes free support. We can also install or customise our tools for you. Contact us.
Installation guides
Magic Magnify™ can be used on any website, CMS, ecommerce site, shopping cart or blog. There are also module/plugins for these platforms:
©2010 Magic Toolbox About | Contact | Support | Affiliates | Newsletter | Testimonials | License Agreement | Terms | Privacy