Magic Magnify™ integration

1. Installation

It's easy to add Magic Magnify™ to your website:

1. Download Magic Magnify™ - get the trial version or buy the full version.
2. Upload the magicmagnify folder to your site.
3. Reference magicmagnify.js before the </head> of your page. (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)
4. Reference your small image with <img>, link it with <a> to your big image and add a CSS class of "MagicMagnify".
5. Finished! Try this demo:

Your code should look something like this:

2. Customization

There are 31 options you can change to suit your website. See the full list of parameters below.

To change the options, use the rel tag. This example will change the magnifier size to 100% width of the image:

Get inspiration! View these examples for ideas on how you could customize your magnifier.

3. Multiple images

You can display different images of a product by adding an id attribute to the main image link and a rel attribute to the alternative image links.

In the example below, the unique id is rings. There are 3 images - large, small and tiny.

Set the images to swap on mouseover with, instead of on click. Example:

4. Border

To change the border color, set the magnifier-border-color to the color of your choice (the default color is #9E2F2D). For example:

To change the thickness of the magnifier border, use the magnifier-border-width option, for example:

5. Magnifier size

Change the magnifier width by adding a magnifier-size to the rel attribute. The default size is 66% of the width of the image. You can change it to a fixed width in pixels (px) or another percentage. For example, you can make it double the width of the image for an interesting effect like so:

6. Magnifier shape

Change the magnifier shape to a square by adding a magnifier to the rel attribute. The default shape is circle. For example:

7. Magnifier image

Create your own image to replace the standard circle or square!

We created this magnifier PNG, shown on the image below:

To add your own custom magnification lens, create a 24-bit PNG image, with transparency where you would like the magnification to show. Upload that image to your website and reference it using the lense-url parameter. Then specify size of your lense, the location, border of 0 and turn the filter to false. For example:

To get help, contact us. We can also install or customise our tools for you.