Magic Toolbox

Magic Zoom™ integration

Magic Zoom™ will work on any website and there are shopping cart modules too.

Instructions

  1. Download the Magic Zoom™ demo.
  2. Upload magiczoom.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 a 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="magiczoom.js" type="text/javascript"></script>

</head>

<body>

<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>

</body>

</html>

Customization

Try these customizations for Magic Zoom™ or use the wizard!

  1. Position
  2. Size
  3. Title
  4. Loading message
  5. Transparency
  6. Smoothing
  7. Fade in/out
  8. Click to initialize
  9. Click to activate
  10. Show the entire image
  11. Frames per second
  1. Editing the CSS
  2. Border
  3. Mouse box
  4. Change images dynamically
  5. Multiple images
  6. Preload multiple images
  7. Click and drag
  8. Remove IE toolbar
  9. Parameters
  10. Modules for shopping carts

Position

Change the position of the zoomed area to either top/right/bottom/left by using zoom-position. The default position is right. For example:

<a href="big.jpg" class="MagicZoom" rel="zoom-position: top"><img src="small.jpg"/></a>

You can change the distance of the zoom from the small image (default is 15px) using the zoom-distance parameter like so:

<a href="big.jpg" class="MagicZoom" rel="zoom-distance:5"><img src="small.jpg"/></a>

A very different effect is created by setting the zoom-position to zoom internally. See it working. Example code:

<a href="big.jpg" class="MagicZoom" rel="zoom-position: inner"><img src="small.jpg"/></a>

You can set the zoomed area to absolutely anywhere you like. Give it a unique id and reference it with a div suffixed with -big. Position your div with CSS. Example:

<a href="big.jpg" class="MagicZoom" id="elephant" rel="zoom-position: custom><img src="small.jpg"/></a>
<div id="elephant-big"></div>

Size

Change the size of the zoomed area by adding zoom-width and/or zoom-height parameters. The default size is 300px by 300px. Example:

<a href="big.jpg" class="MagicZoom" rel="zoom-width:400px; zoom-height:200px"><img src="small.jpg"/></a>

Title

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

<a href="big.jpg" class="MagicZoom" title="Hey! This is a caption."><img src="small.jpg"/></a>

Example with caption title

You can hide the title by setting show-title to false.

<a href="big.jpg" class="MagicZoom" title="Hey! This is a caption." rel="show-title:false"><img src="small.jpg"/></a>

Loading message

While the large image is downloading, it says "Loading zoom...". You can change the text by using the loading-msg parameter. Example:

<a href="big.jpg" class="MagicZoom" rel="loading-msg:Put your message here!"><img src="small.jpg"/></a>

You can remove the loading message by setting show-loading to false.

<a href="big.jpg" class="MagicZoom" rel="show-loading:false"><img src="small.jpg"/></a>

An animated GIF is shown to the left of the message. You should set the location of this GIF in the CSS. You can create your own GIF if you prefer.

You can customise the loading box opacity (default is 75) and position (default is -1). For example:

<a href="big.jpg" class="MagicZoom" rel="loading-opacity:50; loading-position-x:150; loading-position-y:20"><img src="small.jpg"/></a>

Transparency

The opacity of the mouse hover can be changed from the default 50 to any value between 0 (transparent) and 100 (solid). Example:

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

Alternatively, the mouse hover can stay clear and the opacity of the rest of the image can change. Example:

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

Reverse opacity

Smoothing

Smoothing lets the zoom come to a gradual stop when the user moves their mouse. You can turn it off like so:

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

You can change the speed (40 is default) to a value from 0 (slow) to 99 (fast). Example:

<a href="big.jpg" class="MagicZoom" rel="smoothing-speed:20"><img src="small.jpg"/></a>

Fade in/out

You can slowly fade in the zoomed image to give a more subtle effect. It is set to false by default. You can turn it on and adjust the speed (in milliseconds) like so:

<a href="big.jpg" class="MagicZoom" rel="zoom-fade:true; zoom-fade-in-speed:800; zoom-fade-out-speed:400"><img src="small.jpg"/></a>

Click to initialize

To reduce your bandwidth usage, you can set the large image to download on click. The user experience is not as good, so this option is set to false by default. Example:

<a href="big.jpg" class="MagicZoom" rel="click-to-initialize:true"><img src="small.jpg"/></a>

Click to activate

If you don't want the image to zoom immediately the user mouses over, you can set the zoom to activate on click:

<a href="big.jpg" class="MagicZoom" rel="click-to-activate:true"><img src="small.jpg"/></a>

Show the entire image

You can show the entire large image on hover instead of part of the image. This is an excellent way to immediately show more detail for small images, such as on search results pages or category pages on an ecommerce site. Your large image should only be about 300-450px in this case. See this working example. Example HTML:

<a href="big.jpg" class="MagicZoom" rel="entire-image:true"><img src="small.jpg"/></a>

Frames per second

You can adjust the speed of the zoom in fps (frames per second). The default is 25 (same as television). The higher the fps, the smoother the zoom will feel as you move across the image. Low-performance computers might struggle to render the image if the fps is too high, so test your zoom if you increase your FPS. Example:

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

Editing the CSS

You can change the colors, borders, font styles by editing MagicZoom.css. This is the original CSS file:

/* Stlye of zoomed window */
.MagicZoomBigImageCont {
border: 1px solid #999;
}

/* Style of header, activated with "title" attribute in <a> tag */
.MagicZoomHeader {
font-size: 8pt !important;
line-height: normal !important;
color: #fff;
background: #666;
text-align: center !important;
}

/* Style of small square under mouse */
.MagicZoomPup {
border: 1px solid #aaa;
background: #fff;
cursor: move;
}

/* Style of message box while image is loading */
.MagicZoomLoading {
border: 1px solid #ccc;
background: #fff url(img/ajax-loader.gif) no-repeat 2px 50%;
padding: 4px 4px 4px 24px !important;
margin: 0;
text-decoration: none;
text-align: left;
font-size: 8pt;
font-family: sans-serif;
color: #444;
}

Border

Edit the CSS to change the border around the zoomed image. Remove the border like so:

.MagicZoomBigImageCont {
border: none;
}

Mouse box

Change the background color of the mouse hover area (default is grey) by editing MagicZoomPup. This example has a blue background as well as a dotted background image:

.MagicZoomPup {
border: 2px solid #658EC2;
background: #658EC2 url(dotted.png);
cursor: move;
}

Blue background with dotted PNG

Change images dynamically

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

  • MagicZoom.refresh()
  • MagicZoom.update()

To see working examples, download the demo and open example12.html.

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 rabbit. There are 3 images - large, small and tiny.

<a href="dress1large.jpg" class="MagicZoom" id="rabbit"><img src="dress1small.jpg"></a>

<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>

This is how it looks:

Example showing multiple images

You can place images anywhere on the page and as many as you like. You can switch the images via thumbnail images or text or even a form object (e.g. dropdown or button).

You can set the images to swap on mouseover, instead of on click. Example:

<a href="dress1large.jpg" class="MagicZoom" id="rabbit" rel="thumb-change:mouseover"><img src="dress1small.jpg"></a>

<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>

There are 3 effects for changing the medium-size image. Dissolve will fade one image into the other; fade will brighten the image to white and dissolve it at the same time; false will remove the effect so the images swap immediately. You can also choose the speed of the effect. Example:

<a href="dress1large.jpg" class="MagicZoom" id="rabbit" rel="selectors-effect:fade; selectors-effect-speed:700"><img src="dress1small.jpg"></a>

<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>

Preload multiple images

Choose whether the images download in advance or on demand. By default, small images download in advance and large images download on demand (when the user hovers over the image). This reduces the total download size of your page, while maintaining a good user experience. You can adjust these as follows:

<a href="big.jpg" class="MagicZoom" rel="preload-selectors-small:true; preload-selectors-big:true"><img src="small.jpg"/></a>

Click and drag

The zoom window can be set to move on drag instead of on hover. See it working. Turn it on like so:

<a href="big.jpg" class="MagicZoom" rel="drag-mode:true"><img src="small.jpg"/></a>

The window will when it is clicked and dragged or when another part of image is clicked. You can turn off the latter option like so:

<a href="big.jpg" class="MagicZoom" rel="drag-mode:true; move-on-click:false"><img src="small.jpg"/></a>

The initial position of the zoom can be changed (default is -1 which is centered). For example:

<a href="big.jpg" class="MagicZoom" rel="drag-mode:true; x:100; y:200"><img src="small.jpg"/></a>

In drag mode, the zoom window automatically becomes always visible. You can make it initially invisible like so:

<a href="big.jpg" class="MagicZoom" rel="drag-mode:true; always-show-zoom:false"><img src="small.jpg"/></a>

The position of Magic Zoom can be remembered. This can be a useful option in drag mode and also for multiple images. Example:

<a href="big.jpg" class="MagicZoom" rel="drag-mode:true; preserve-position:true"><img src="small.jpg"/></a>

Remove IE toolbar

Place the following line of code before the </head> to prevent the Internet Explorer image toolbar from showing (in highly unlikely circumstances):

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

Buy now Single license £29

Download Free trial

Apply for free license (non-commercial)

Parameters

Parameters for Magic Zoom™
Parameter Default Options Description
zoom-width 300   Width of zoom window (px)
zoom-height 300   Height of zoom window (px)
zoom-position right left / right / top / bottom / inner /custom Position of zoom window
zoom-distance 15   Distance from small image to zoom window (px)
smoothing true true / false Enable smooth zoom movement
smoothing-speed 40 1-99 Speed of smoothing
opacity 50 0-100 Opacity of hovered area
opacity-reverse false true / false Add opacity outside mouse box
click-to-initialize false true / false Click to fetch the large image
click-to-activate false true / false Click to show the zoom
show-title top top / bottom / false Show the title of the image in the zoom window
thumb-change click click / mouseover Multiple images change on click/mouseover
selectors-mouseover-delay 200   Delay before switching thumbnails (ms)
selectors-effect dissolve dissolve / fade / false Dissolve or cross fade thumbnails
selectors-effect-speed 400   Speed of dissolve/fade effect (ms)
preload-selectors-small true true / false Multiple images, preload small images
preload-selectors-big false true / false Multiple images, preload large images
zoom-fade false true / false Zoom window fade effect
zoom-fade-in-speed 400   Zoom window fade-in speed (ms)
zoom-fade-out-speed 200   Zoom window fade-out speed (ms)
fps 25   Frames per second for zoom effect
show-loading true true / false Loading message
loading-msg Loading zoom...   Loading message text
loading-opacity 75 0-100 Loading message opacity
loading-position-x -1   Loading message X-axis position, -1 is center
loading-position-y -1   Loading message Y-axis position, -1 is center
drag-mode false true / false Click and drag to move the zoom
move-on-click true true / false Click to move the zoom (in drag mode)
x -1   Initial X-axis position for drag mode, -1 is center
y -1   Initial Y-axis position for drag mode, -1 is center
always-show-zoom false true / false Make zoom window always visible. (Automatically true in drag-mode.)
preserve-position false true / false Remember position of zoom for multiple images and drag mode
fit-zoom-window true true / false Resize zoom window if big image is smaller than zoom window
entire-image false true / false Show the entire large image on hover

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
Joomla instructions Download 1.5 / 1.0
Magento instructions Download
PrestaShop instructions Download
osCommerce instructions Download 3 / 2
CRE Loaded instructions Download
X-Cart instructions Download
xt:commerce instructions Download
Zen Cart instructions Download
CubeCart instructions Download
Drupal instructions Download 6 / 5
WordPress instructions Download
WordPress e-Commerce instructions Download
Gallery instructions Download
WYSIWYG instructions Download
CS-Cart instructions Download
osCMax instructions Download
OXID instructions Download
NetSuite instructions

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