Magic Zoom™ integration
Magic Zoom™ will work on any website - add it to your site in just a few minutes!
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="MagicZoom.css" type="text/css" media="screen" />
<script src="mz-packed.js" type="text/javascript"></script>
</head>
<body>
<a href="example_big.jpg" class="MagicZoom"><img src="example_small.jpg"/></a>
</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:
<a href="example_big.jpg" class="MagicZoom" rel="zoom-position: top"><img src="example_small.jpg"/></a>
Alternatively, set the zoomed area anywhere you want by setting zoom-position to custom and giving it a unique id. Example:
<a href="example_big.jpg" rel="zoom-position: custom" id="zoom4"><img src="example_small.jpg" /></a>
Then create a div with the same id suffixed with -big (zoom4-big in this example). You can place this div anywhere on your page and customise it with CSS.
<div class="yourstyle" id="zoom4-big"></div>
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:
<a href="example_big.jpg" class="MagicZoom" rel="zoom-width: 400px;"><img src="example_small.jpg"/></a>
You can combine several properties with ‘;’.
<a href="example_big.jpg" class="MagicZoom" rel="zoom-position: top; zoom-width: 400px; zoom-height: 250px"><img src="example_small.jpg"/></a>
Adding a title
Add a caption to your zoomed image by using the title attribute in the <a> tag. Example code:
<a href="example_big.jpg" class="MagicZoom" title="Hey! This is a caption!"><img src="example_small.jpg"/></a>
Loading message
While the large image is downloading, you can display a "loading image" message. This is beneficial if the user has a slow internet connection or if the image has a particularly large file size.
To add a loading image, reference it immediately after your zoomable image. You can use the animated GIF that comes with Magic Zoom™ or you can use an image of your own creation. The text is determined by the alt tag. Example code:
<img class="MagicZoomLoading" src="ajax-loader.gif" alt="Loading zoom, please wait"/>
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:
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:
<!-- Define the main image, but notice the addition of the id attribute -->
<a href="dress-BK-big.jpg" class="MagicZoom" id="zoom1"><img src="dress-BK-small.jpg"></a>
<!-- Define the other images using the id in the rel attribute -->
<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:
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:
<!-- Firstly, define the main image, but notice the addition of the id and rel attributes -->
<a href="dress-BK-big.jpg" class="MagicZoom" id="zoom1" rel="thumb-change: mouseover"><img src="dress-BK-small.jpg"></a>
<!-- Secondly, define the other images using the id in the rel attribute -->
<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
| 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" |
| 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" |
| rel | Specify the relevant image id if there is more than 1 zoom on the page. | Required |
| Example: rel="zoom2" |
| 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" |
Installation guides
Use Magic Zoom™ on any website. Download a module/plugin for a specific platform:
Buy Magic Zoom™
Free trial
Free license
For non-commercial sites:
©2008 Magic Toolbox About | Contact | Support | Newsletter | Testimonials | License Agreement | Terms | Privacy