Enjoy magnifying images on your website.

We're excited to announce the magnify feature of Magic Magnify™ has been integrated into Magic Zoom™. Magic Zoom™ now offers: external zoom, internal zoom and magnify effects.

This means Magic Magnify™ has been discontinued. Don't worry, you're license is still valid but there will be no future updates to this tool.


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:

Nike running shoe

Your code should look something like this:

<html>
<head>
<title>Magic Magnify demo</title>
<script src="magicmagnify/magicmagnify.js" type="text/javascript"></script>
</head>
<body>
<a href="big.jpg" class="MagicMagnify"><img src="small.jpg"/></a>
</body>
</html>

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:

<a href="big.jpg" class="MagicMagnify" rel="blur:10;"><img src="small.jpg"/></a>

Nike running shoe

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.

<a href="ring1-large.jpg" class="MagicMagnify" id="rings"><img src="ring1-small.jpg"></a>
<p>Click to change dress color:</p>
<a href="ring1-large.jpg" rel="rings" rev="ring1-small.jpg"><img src="ring1-tiny.jpg"/></a>
<a href="ring2-large.jpg" rel="rings" rev="ring2-small.jpg"><img src="ring2-tiny.jpg"/></a>
<a href="ring3-large.jpg" rel="rings" rev="ring3-small.jpg"><img src="ring3-tiny.jpg"/></a>
<a href="ring4-large.jpg" rel="rings" rev="ring4-small.jpg"><img src="ring4-tiny.jpg"/></a>

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

<a href="ring1-large.jpg" class="MagicMagnify" id="rings" rel="thumb-change: mouseover"><img src="ring1-small.jpg"></a>
<p>Click to change dress color:</p>
<a href="ring1-large.jpg" rel="rings" rev="ring1-small.jpg"><img src="ring1-tiny.jpg"/></a>
<a href="ring2-large.jpg" rel="rings" rev="ring2-small.jpg"><img src="ring2-tiny.jpg"/></a>
<a href="ring3-large.jpg" rel="rings" rev="ring3-small.jpg"><img src="ring3-tiny.jpg"/></a>
<a href="ring4-large.jpg" rel="rings" rev="ring4-small.jpg"><img src="ring4-tiny.jpg"/></a>

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:

<a href="big.jpg" class="MagicMagnify" rel="magnifier-border-color: #3D3D3D;"><img src="small.jpg"/></a>

Nike running shoe

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

<a href="big.jpg" class="MagicMagnify" rel="magnifier-border-color: #3D3D3D; magnifier-border-width: 5;"><img src="small.jpg"/></a>

Nike running shoe

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:

<a href="big.jpg" class="MagicMagnify" rel="magnifier-size:200%;"><img src="small.jpg"/></a>

Nike running shoe

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:

<a href="big.jpg" class="MagicMagnify" rel="magnifier:square;"><img src="small.jpg"/></a>

Nike running shoe

7. Magnifier image

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

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

Map of US states

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:

<a href="big.jpg" class="MagicMagnify"  rel="lense-url:http://www.example.com/lense.png; magnifier-size:128px; lense-position:bottom; lense-offset-x:-19px; lense-offset-y:-19px; magnifier-border-width:0; magnifier-filter:false;"><img src="small.jpg"/></a>

8. Parameters

Options you can change to alter the look/feel of your magnifier:

List of Magic Magnify™ parameters.
Parameter name Default Options Description
magnifier circle circle / square / inner / custom(x1,y1,x2,y2,..) Magnifier shape
magnifier-size 66% Numeric or % Magnifier size: % of small image width or fixed size in px
magnifier-size-x 66% Numeric or % Magnifier width: % of small image width or fixed size in px
magnifier-size-y 66% Numeric or % Magnifier height: % of small image width or fixed size in px
magnifier-effect fade none / pulse / fade Magnifier appearing effect
magnifier-filter glow glow / shadow Magnifier effect
magnifier-time 200 milliseconds Time for magnifier effect
magnifier-simulate false % ('false'=off) Create enlarged images from small ones with specified scale
magnifier-border-color #CCCCCC Magnifier border color
magnifier-border-width 1 px Magnifier border thickness
border-color #CCCCCC Outside border color
border-width 0 Numeric, px Outside border width
progress-color #CCCCCC Color of the loading bar
progress-height 0 Numeric, px Height of the loading bar
wheel-effect 20% 0-100% Wheel effect for changing magnifier size
lense-url Custom image URL
lense-offset-x 0 Numeric, px Custom image x-offset
lense-offset-y 0 Numeric, px Custom image y-offset
lense-position top top / bottom Custom image position
disable-auto-start false true / false Disable magnify effect until clicked
pause-on-click false true / false Disable/Enable pause on click
blur 0 Numeric, px Blur effect of the main image when magnifier is shown
transparency 100% 0-100% Transparency of the main image when magnifier is shown
link-url URL URL the image should link to (if any)
link-window _self _self / _blank / _parent / _top Page where the link should load
hide-cursor true true|false Hide mouse pointer
callback JavaScript function name for mouse click callback
Thumbnails
thumb-change click click / mouseover Method to switch between multiple images
thumb-change-delay 200 milliseconds Delay before switching images
thumb-change-time 500 milliseconds Speed of changing size of multiple images
change-time 500 milliseconds Speed of changing opacity of multiple images

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