MagicToolbox.comImage tools for your website Contact Us

Magic Magnify™ integration

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.
  4. Reference your small image with <img>, link it with <a> to your big image and add a CSS class of "MagicMagnify".
  5. 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/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

Change the border color by adding a magnifier-border-color to the the rel attribute to your <a> tag. The default color is #9E2F2D. Example code:

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

Change the thickness of the magnifier border using a magnifier-border-width option:

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

Magnifier size

Change the magnifier size by adding a magnifier-size to the rel attribute. The default size is 100px. Example code:

<a href="big.jpg" rel="magnifier-border-color: #6e8c0e; magnifier-size: 200px;" class="MagicMagnify"><img src="small.jpg"/></a>

Magnifier shape

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

<a href="big.jpg" rel="magnifier-border-color: #6e8c0e; magnifier-size: 200px; magnifier: square;" class="MagicMagnify"><img src="small.jpg"/></a>

Magnifier image

Create your own image to replace the standard circle or square. See example.

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>

List of parameters

Optional paramaters for customising Magic Magnify™.

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. All customers get 30 minutes free support. We can also install or customise our tools for you.

Buy Now1 site license £29

30 day money-back guarantee.
Free license for non-commercial use

Download Free trial

30 minutes free technical support.

Download a module:



Magic Toolbox on Facebook Magic Toolbox on Twitter Magic Toolbox on GetSatisfaction