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 before the </head> of your page. Example:

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

   <script type="text/javascript" src="magiczoom.js"></script>

4. Zoom an image by linking your small image to your big image with a CSS class of MagicZoom. Example:

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

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 basic code should look something like this:

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
12. Editing the CSS
13. Border
14. Mouse box
15. Change images dynamically
16. Multiple images
17. Preload multiple images
18. Click and drag
19. Remove IE toolbar
20. Parameters

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:

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

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

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:

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:

Title

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

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

Loading message

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

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

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:

Transparency

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

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

Smoothing

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

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

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:

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:

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:

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:

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:

Editing the CSS

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

Border

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

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:

Change images dynamically

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

• MagicZoom.refresh() - refreshes all zooms on the page.
• MagicZoom.update() - updates one specific zoom on the page.

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.

This is how it looks:

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:

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:

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:

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:

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:

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

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

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

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