Magic Zoom^™ integration

Magic Zoom^™ will work on any website - add it to your site in just a few minutes! There are different instructions if you are using: .

Instructions

Download Magic Zoom^™ - buy the full version or get the trial version.
Upload mz-packed.js and MagicZoom.css to your website.
Reference the CSS and JS files in the <head> of your page.
Reference your small image with <img> and link it to your big image using the class of "MagicZoom".

That's it!

Your code should look something like this:

<html>

<head>

<title>MagicZoom | Example</title>

</head>

<body>

</body>

</html>

Customization

You can adjust Magic Zoom^™ to fit the look and feel of your website.

Zoomed area position

Change the position of the zoomed area to either top/right/bottom/left by adding the rel attribute to your <a> tag. The default position is right. Example code:

Zoomed area size

Change the size of the zoomed area by adding zoom-width and/or zoom-height properties to rel attribute. The default size is 300 x 300px. Example code:

You can combine several properties with ‘;’.

Adding a title

Add a caption to your zoomed image by using the title attribute in the <a> tag. Example code:

Example with caption title

Changing transparency

Adjust the opacity of the square on-hover mouse effect by adding an opacity value in the rel attribute of the <a> tag. The default opacity is 50. Enter a value between 0 (transparent) and 100 (solid).

You can also change the background color (default is grey) by adjusting the CSS class MagicZoomPup. Example with red square:

Example with red square

Customizing the CSS

You can change the colors, borders, font styles by editing MagicZoom.css file. These are the 3 classes you can change:

/* CSS class for zoomed area */
.MagicZoomBigImageCont {
border: 1px solid #9e2f2d;
}

/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <a> tag */
.MagicZoomHeader {
font: 10px Tahoma, Verdana, Arial, sans-serif;
color: #fff;
background: #9e2f2d;
text-align: center;
}

/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
border: 1px solid #aaa;
background: #fff;
}

Multiple images

If you have several images of the same product (from different angles or in different colors), Magic Zoom™ can display these. Example code:

<a href="dress-BK-big.jpg" class="MagicZoom" id="zoom1"><img src="dress-BK-small.jpg"></a>

<p>Click to change dress color:</p>
<a href="dress-BK-big.jpg" rel="zoom1" rev="dress-BK-small.jpg"><img src="color_BK.gif"/></a>
<a href="dress-PR-big.jpg" rel="zoom1" rev="dress-PR-small.jpg"><img src="color_PR.gif"/></a>
<a href="dress-RB-big.jpg" rel="zoom1" rev="dress-RB-small.jpg"><img src="color_RB.gif"/></a>
<a href="dress-RD-big.jpg" rel="zoom1" rev="dress-RD-small.jpg"><img src="color_RD.gif"/></a>

Here is how it looks:

Example showing multiple images

You can have as many selectors as you want, anywhere on the page.

Each selector can be either an image, text or a button.

Step-by-step

Setup Magic Zoom^™ as usual on your page (see top of page for instructions).
Add a unique id to the main <a> to identify the image you are referencing.
Add your selectors using <a> links.
Set rel and rev attributes to each selector:
- rel should reference the zoom id.
- rev should point to the new small image for the zoom.
- href should point to the new big image of the zoom.

Changing selection behaviour

Instead of clicking the thumbnail to change image, you can set it to change upon mouse hover. Use the thumb-change property of the rel attribute for the main <a> tag. Two values are available to use: click (default) and mouseover.

Example code:

<a href="dress-BK-big.jpg" class="MagicZoom" id="zoom1" rel="thumb-change: mouseover"><img src="dress-BK-small.jpg"></a>

<p>Mouseover to change dress color:</p>
<a href="dress-BK-big.jpg" rel="zoom1" rev="dress-BK-small.jpg"><img src="color_BK.gif"/></a>
<a href="dress-PR-big.jpg" rel="zoom1" rev="dress-PR-small.jpg"><img src="color_PR.gif"/></a>
<a href="dress-RB-big.jpg" rel="zoom1" rev="dress-RB-small.jpg"><img src="color_RB.gif"/></a>
<a href="dress-RD-big.jpg" rel="zoom1" rev="dress-RD-small.jpg"><img src="color_RD.gif"/></a>

List of attributes

Attributes for the <img> tag
src	The URI of your small image.	Required
	Example: href="/images/motorbike_small.jpg"
alt	The alternative description for the image (required for accessibility).	Optional
	Example: href="/images/motorbike_small.jpg"
id	Choose an id if there is more than one zoom on your page.	Optional
	Example: id="zoom2"

Attributes for the <a> tag
href	The URI of your large image.	Required
	Example: href="/images/motorbike_large.jpg"
title	Adds a caption above the zoomed image.	Optional
	Example: title="Nokia N95 mobile phone"
rev	The URI of your small image (only required for multiple images).	Optional
	Example: href="/images/motorbike_small.jpg"

Attributes for the <a> tag (if using multiple zooms)
rel	Specify the relevant image id if there is more than 1 zoom on the page.	Required
	Example: rel="zoom2"

Attributes for the <a> tag (if using multiple images)
rel	The rel can contain multiple attributes to customise your zoom.	Optional
	drag-mode Turn on ability to drag image by setting this to true. Example: rel="drag-mode: true" always-show-zoom Always display the zoomed image by setting this to true. Example: rel="always-show-zoom: true" zoom-position Change the default location of the zoomed image by setting this to custom. Set the location of the zoomed image by using its id and adding -big. Example: rel="zoom-position: custom" and set the location of the zoomed image with id="zoom2-big"

Other installation guides

Easy guides to add Magic Zoom^™ to your website:

Single license	£25
5 site license	£95
Unlimited license	£395

Magic Zoom^™ integration

Instructions