Magic Toolbox

Magic Zoom™ integration

Magic Zoom™ will work on any website. There are also dedicated modules for: VirtueMart, Joomla, osCommerce, CRE Loaded, Magento, X-Cart, xt:commerce, Zen Cart, CubeCart, WordPress, Drupal, Gallery, NetSuite.

Instructions

  1. Download the Magic Zoom™ demo.
  2. Upload mz-packed.js and MagicZoom.css to your website.
  3. Reference the CSS and JS files in the <head> of your page.
  4. Zoom an image by linking your small image to your big image with the CSS class of "MagicZoom". See the example HTML below. Enjoy
  5. Buy Magic Zoom™ (full version) and overwrite the JS file (this will remove the "please upgrade" message). Or, apply for a free license.

Your code should look something like this:

<html>

<head>

<title>Magic Zoom example</title>

<link rel="stylesheet" href="MagicZoom.css" type="text/css" />

<script src="mz-packed.js" type="text/javascript"></script>

</head>

<body>

<a href="big.jpg" class="MagicZoom"><img src="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="big.jpg" class="MagicZoom" rel="zoom-position: top"><img src="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="big.jpg" rel="zoom-position: custom" id="zoom4"><img src="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="big.jpg" class="MagicZoom" rel="zoom-width: 400px;"><img src="small.jpg"/></a>

You can combine several properties with ‘;’.

<a href="big.jpg" class="MagicZoom" rel="zoom-position: top; zoom-width: 400px; zoom-height: 250px"><img src="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="big.jpg" class="MagicZoom" title="Hey! This is a caption!"><img src="small.jpg"/></a>

Example with caption title

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).

<a href="big.jpg" class="MagicZoom" rel="opacity: 10"><img src="small.jpg"/></a>

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;
}

Changing images dynamically

If you would like to change your images dynamincally (e.g. with AJAX), you can use these commands:

  • MagicZoom_stopZooms
  • MagicZoom_findZooms

The common process of using these commands is:

  1. Call MagicZoom_stopZooms.
  2. Change your images.
  3. Call MagicZoom_findZooms.

Example code:

function changeZoomImage() {

// Step 1
// Stop Magic Zoom
MagicZoom_stopZooms();

// Step 2
// Get the reference to the <A> tag
var zoomLink = document.getElementById('zoom1');
// Change the URL for the large image
zoomLink.href = "new-large-image-url.jpg";
// Change the small image
zoomLink.innerHTML = '<img src="new-small-image-url.jpg"/>';

// Step 3
// Re-initialize Magic Zoom
MagicZoom_findZooms();
}

Remove the IE image toolbar

Add the following line of code inside the <head> to prevent the Internet Explorer image toolbar from showing:

<meta http-equiv="imagetoolbar" content="no" />

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:

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

  1. Setup Magic Zoom™ as usual on your page (see top of page for instructions).
  2. Add a unique id to the main <a> to identify the image you are referencing.
  3. Add your selectors using <a> links.
  4. 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

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"		  

Installation guides

Use Magic Zoom™ on any website. Download a module/plugin for a specific platform:

Step-by-step instructions Zip file
Standard instructions (any website) Download
VirtueMart instructions Download 1.5 / 1.0
Joomla instructions Download 1.5 / 1.0
Magento instructions Download
osCommerce instructions Download
CRE Loaded instructions Download
X-Cart instructions Download
xt:commerce instructions Download
Zen Cart instructions Download
CubeCart instructions Download
Drupal instructions Download
WordPress instructions Download
Gallery instructions Download
NetSuite instructions

Buy Magic Zoom™

£25
£95
£395

Free trial

Download Magic Zoom

Free license

For non-commercial sites:

Apply for free license

©2008 Magic Toolbox   About | Contact | Support | Newsletter | Testimonials | License Agreement | Terms | Privacy