Magic Magnify™ integration
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) |
| pauseOnClick | false | Disable/Enable pause on click (true|false) |
| disableAutoStart | false | Disable magnify effect until clicked (false|true) |
To get help, contact us. All customers get 30 minutes free support. We can also install or customise our tools for you.
Modules and Plugins
- CS-Cart module for Magic Magnify
- Magento module for Magic Magnify
- VirtueMart module for Magic Magnify
- Joomla 1.5 module for Magic Magnify
- PrestaShop module for Magic Magnify
- osCommerce 3 module for Magic Magnify
- Zen Cart module for Magic Magnify
- WordPress plugin for Magic Magnify
- WordPress e-Commerce plugin for Magic Magnify
- CRE Loaded module for Magic Magnify
- CubeCart module for Magic Magnify
- xt:Commerce module for Magic Magnify
- NetSuite for Magic Magnify
- Drupal 6 module for Magic Magnify
- X-Cart module for Magic Magnify
- Gallery module for Magic Magnify
- WYSIWYG extension for Magic Magnify
- OXID module for Magic Magnify
- eBay for Magic Magnify
- osCMax module for Magic Magnify
Guarantee
30 day money-back guarantee.
100% Support
30 minutes free technical support.