Simply follow the Instructions below to install Magic Zoom™ in just 5 minutes, then customize it as you wish.

Installation

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Zoom™ module:

If you're not using one of the platforms above, install Magic Zoom™ like so:

  1. Download the Magic Zoom™ demo (or download a module listed to the right if you use such a platform).
  2. Upload magiczoom folder 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/magiczoom.css"/>
    <script type="text/javascript" src="magiczoom/magiczoom.js"></script>
    

    (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)

  4. Create a zoom 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™ and upload your licensed magiczoom.js file to remove the "please upgrade" message. Or, apply for a free license if your site is non-commercial.

Your HTML should look something like this:

<html>
<head>
<title>Magic Zoom example</title>
<link rel="stylesheet" href="magiczoom/magiczoom.css" type="text/css"  />
<script src="magiczoom/magiczoom.js" type="text/javascript"></script>
</head>
<body>
<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>
</body>
</html>

Now it's working, use the wizard to choose your perfect settings. If you get stuck, email us.

This 4-minute video summarises the setup process:

Below, we explain all the Magic Zoom™ options and how to adjust them, starting with Size...

Size

Change the size of the zoomed area with zoomWidth and/or zoomHeight parameters. The default size of the zoom window is 100% of the small image. Here is a smaller zoom window:

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

Notice how the square area under the cursor automatically changes size when you change the dimensions of the zoomed area. Here is a larger zoom window:

<a href="big.jpg" class="MagicZoom" data-options="zoomWidth:400px; zoomHeight:400px"><img src="small.jpg"/></a>

You can also set the size of the zoomed area as a percentage of the small image.

<a href="big.jpg" class="MagicZoom" data-options="zoomWidth:70%; zoomHeight:100%"><img src="small.jpg"/></a>

Position

Adjust the location of the zoomed image with zoomPosition. Try these examples for left, top, bottom, right (note that the position automatically moves to another position if there is insufficient screen space):

<a href="big.jpg" class="MagicZoom" data-options="zoomPosition: top"><img src="small.jpg"/></a>

Change the distance from the main image to the zoom (default is 15px) with the zoomDistance parameter. Example:

<a href="big.jpg" class="MagicZoom" data-options="zoomDistance:200"><img src="small.jpg"/></a>

You can position the zoomed image literally anywhere on your page if you give it a unique id and reference it with the div. Place your div anywhere in your code and position it with CSS. Example HTML:

<a href="big.jpg" class="MagicZoom" data-options="zoomPosition:#yourzoom"><img src="small.jpg"/></a>
<div id="yourzoom"></div>

Magic Zoom™ automatically changes the location if there is insufficient space on the users screen.

Zoom effects

Magic Zoom™ has a choice of zoom techniques: Zoom, Magnify, Preview and Internal.

Zoom

Zoom on hover is the default effect:

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

Magnify

An elegant magnifying-glass effect can be chosen with zoomMode set to magnifier. The default size is 70% of the small image, like so:

<a href="big.jpg" class="MagicZoom" data-options="zoomMode: magnifier"><img src="small.jpg"/></a>

To change the magnifier size, set zoomWidth and/or zoomHeight. The example below makes the magnifying glass 300px width and height:

<a href="big.jpg" class="MagicZoom" data-options="zoomMode: magnifier; zoomHeight: 300; zoomWidth: 300"><img src="small.jpg"/></a>

Magnify + mousewheel

Permit users to control the magnifier with their mousewheel - set variableZoom to true. Example:

<a href="big.jpg" class="MagicZoom" data-options="zoomMode: magnifier; variableZoom: true"><img src="small.jpg"/></a>

Preview

For quick previews, show an entire image on hover. This is excellent for immediately showing larger images on category pages or search result listings.

The 3 examples below show a 330px width image on hover:




<a href="big.jpg" class="MagicZoom" data-options="zoomMode:preview"><img src="small.jpg"/></a>

Internal zoom

Zoom inside the image by setting the zoomPosition to inner. Example:

<a href="big.jpg" class="MagicZoom" data-options="zoomPosition: inner"><img src="small.jpg"/></a>

Multiple images

You can display different images of a product by adding an id attribute to the main image link and a data-zoom-id attribute to the alternative image links.

In the example below, the unique id is trainers. There are 3 images - big, small and tiny.

<a href="trainer1big.jpg" class="MagicZoom" id="trainers"><img src="trainer1small.jpg"></a>

<a href="trainer1big.jpg" data-zoom-id="trainers" data-image="trainer1small.jpg"><img src="trainer1tiny.jpg"/></a>
<a href="trainer2big.jpg" data-zoom-id="trainers" data-image="trainer2small.jpg"><img src="trainer2tiny.jpg"/></a>
<a href="trainer3big.jpg" data-zoom-id="trainers" data-image="trainer3small.jpg"><img src="trainer3tiny.jpg"/></a>


Images swap by default when clicked. You can swap the images on hover with selectorTrigger. Example:



<a href="trainer1big.jpg" class="MagicZoom" id="trainers" data-options="selectorTrigger: hover"><img src="trainer1small.jpg"></a>

By default a dissolve effect is used when images are swapped. To turn this feature off, set transitionEffect to false. Example



<a href="trainer1big.jpg" class="MagicZoom" id="trainers" data-options="transitionEffect: false"><img src="trainer1small.jpg"></a>

Preload images

You can preload the images in advance (once all other page content has downloaded) or you can trigger them to download on demand (lazy loading).

By default, all images will preload.

If you would like only the first large image in a group of multiple images to download, set lazyZoom to true. This means the other large images will download when the user hovers over the image. Those that do look at those images must wait briefly while they download on demand. Example:

<a href="big.jpg" class="MagicZoom" data-options="lazyZoom: true"><img src="small.jpg"/></a>

Hint

A hint is displayed on the image to indicate that the image is zoomable. The hint can be removed like so:

<a href="big.jpg" class="MagicZoom" data-options="hint: off"><img src="small.jpg"/></a>

By default the hint will appear once. If you want the hint to always appear on the image, use this code:

<a href="big.jpg" class="MagicZoom" data-options="hint: always"><img src="small.jpg"/></a>

The text can be changed with textHoverZoomHint if zoom activates on hover or textClickZoomHint if zoom activates on click. Below is an example using textHoverZoomHint attribute:

<a href="big.jpg" class="MagicZoom" data-options="textHoverZoomHint: Any text you want!"><img src="small.jpg"/></a>

The example below uses the textClickZoomHint attribute to change the hint text. Example:

<a href="big.jpg" class="MagicZoom" data-options="zoomOn: click; textClickZoomHint:Use any text for the hint message"><img src="small.jpg"/></a>

Captions

Add a caption on your zoomed image by using title with the zoomCaption attribute in the <a> tag. The caption position setting zoomCaption is turned off by default. You can show the caption top or bottom of the image. This example uses the bottom option:

<a href="big.jpg" class="MagicZoom" data-options="zoomCaption: bottom" title="This caption is under the image."><img src="small.jpg"/></a>

Change the font, colours and borders via the magiczoom.css file. Example:

.mz-zoom-window .mz-caption {
font-size: 16pt !important;
line-height: 150% !important;
color: #6B6526;
background: #E5DF9C;
text-align: center !important;
}

Click to activate

If you don't want the image to zoom immediately on hover, you can set it to activate on click:

<a href="big.jpg" class="MagicZoom" data-options="zoomOn: click"><img src="small.jpg"/></a>

This setting will also deactivate the zoomed image on click.

Right click menu

The option to right click on an image is disabled by Magic Zoom™. You can enable right click like so:

<a href="big.jpg" class="MagicZoom" data-options="rightClick:true"><img src="small.jpg"/></a>

API & callbacks

API methods

You can use the Magic Zoom™ API commands to change your images dynamincally (AJAX):

  • MagicZoom.start(<#id>) - Start Magic Zoom instance by #id. Without parameters, start all instances on the page.
  • MagicZoom.stop(<#id>) - Stop Magic Zoom instance by #id. Without parameters, stop all instances on the page.
  • MagicZoom.refresh(<#id>) - Reload Magic Zoom instance by #id. Without parameters, reload all instances on the page.
  • MagicZoom.update(<#id>, <large-image>, <small-image>) - Update particular zoom by #id.
  • MagicZoom.switchTo(<#id>, <selector element> | <index of selector>) - Switch to a particular image by selector. Second parameter is either reference to selector element or index number of the selector (index number starts from 0).
  • MagicZoom.prev(<#id>) - Go to the previous image of a particular zoom.
  • MagicZoom.next(<#id>) - Go to the next image of a particular zoom.
  • MagicZoom.zoomIn(<#id>) - Activate zoom mode of a particular zoom.
  • MagicZoom.zoomOut(<#id>) - Deactivate zoom mode of a particular zoom.

If you just need to update the MagicZoom.update settings, leave large-image and small-image parameters blank.

You can trigger events once the zoom has started or updated by defining a function for the callback onready:

 MagicZoom.options = { 
      'onready': function(id, isUpdated) { 
         alert('Zoom on <a id="'+id+'"> is ready'); 
     } 
};

Here are some of the many examples of how you could use the API:

For more examples, download the demo (zip) and open example13.html.

Callbacks

  • onZoomReady: function(<#id of zoom>){} - Fires when zoom instance is ready to operate.
  • onUpdate: function(<#id of zoom>, previous image <a>, new image <a>){} - Fires when images swapped.
  • onZoomIn: function(<#id of zoom>){} - Fires when zoom mode activated.
  • onZoomOut: function(<#id of zoom>){} - Fires when zoom mode deactivated.

Zoom your slideshow

You can add zoom effects to each image in a slideshow by combining Magic Zoom™ with Magic Slideshow™.

Update your file references before your </head> tag. For example:

<link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magiczoom/magiczoom.js" type="text/javascript"></script>

<link href="magicslideshow/magicslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

<script type="text/javascript">MagicSlideshow.options['onready']=function(id){ if (id=='zoom-slideshow') { jQuery('#zoom-slideshow a.MagicZoom').attr('data-options',''); MagicZoom.start(); } }</script>
<style type="text/css">.mss-slide div { text-align:center; }</style>

Place the following code in the <body> tag of your web page. The example below uses thumbnails:

<div class="MagicSlideshow" data-options="width:400px;height:228px;autoplay:false;selectors:bottom;selectors-style:thumbnails;" id="zoom-slideshow">
    <div data-thumb-image="tiny1.jpg">
        <a href="big1.jpg" data-options="autostart:false;" class="MagicZoom"><img src="small1.jpg"/></a>
    </div>
    <div data-thumb-image="tiny2.jpg">
        <a href="big2.jpg" data-options="autostart:false;" class="MagicZoom"><img src="small2.jpg"/></a>
    </div>
    <div data-thumb-image="tiny3.jpg">
        <a href="big3.jpg" data-options="autostart:false;" class="MagicZoom"><img src="small3.jpg"/></a>
    </div>
    <div data-thumb-image="tiny4.jpg">
        <a href="big4.jpg" data-options="autostart:false;" class="MagicZoom"><img src="small4.jpg"/></a>
    </div>
</div>

Your slideshow will look like this:

Magic Zoom integration
Magic Zoom integration
Magic Zoom integration
Magic Zoom integration

If you prefer to use bullets instead of thumbnails, please use this code in your <body> tag:

<div class="MagicSlideshow" data-options="width: 400px; height: 228px; autoplay: false; selectors: bottom; selectors-style: bullets;" id="zoom-slideshow">
    <div><a data-options="autostart:false;" href="big1.jpg" class="MagicZoom"><img src="small1.jpg"/></a></div>
    <div><a data-options="autostart:false;" href="big2.jpg" class="MagicZoom"><img src="small2.jpg"/></a></div>
    <div><a data-options="autostart:false;" href="big3.jpg" class="MagicZoom"><img src="small3.jpg"/></a></div>
    <div><a data-options="autostart:false;" href="big4.jpg" class="MagicZoom"><img src="small4.jpg"/></a></div>
</div>
Magic Zoom integration
Magic Zoom integration
Magic Zoom integration
Magic Zoom integration

HD retina display

Optimize your images for retina screens. Use data-zoom-image-hd for large HD image in the <a> tag. Example:

<a href="big.jpg" data-zoom-image-hd="big-hd.jpg" class="MagicZoom"><img src="small.jpg"/></a>

Use data-image-hd for small HD image:

<a href="big.jpg" data-image-hd="small-hd.jpg" class="MagicZoom"><img src="small.jpg"/></a>

If you want to use HD images for both large and small images, your code will look like so:

<a href="big.jpg" data-zoom-image-hd="big-hd.jpg" data-image-hd="small-hd.jpg" class="MagicZoom"><img src="small.jpg"/></a>

CSS customizations

Control the look and format of your images using Cascading Style Sheets.

.mz-zoom-window .mz-caption controls the caption in your zoom window. Change the background; color; font-size + more.

.mz-zoom-window .mz-caption {
}

.mz-thumb controls the thumbnails on the page. Customize the position; look & feel to fit your website perfectly.

.mz-thumb {
}

.mz-thumb-selected controls the settings of the thumbnail which is active. The default setting greys out the activate thumbnail. This can be customized to any style you want.

.mz-thumb-selected {
}

.mz-zoom-window controls the standard zoom view. Change the position; background; box shadow + more.

.mz-zoom-window {
}

.mz-zoom-window.mz-magnifier controls the zoom when using the magnifier mode. Cistomize the magnifier size; border color + more.

.mz-zoom-window.mz-magnifier {
}

.mz-zoom-window.mz-preview controls the zoom when using the preview mode. Choose the position; size + more.

.mz-zoom-window.mz-preview {
}

.mz-zoom-window.mz-inner controls the zoom when using the inner zoom mode. Add a border or a box shadow. Your choice.

.mz-zoom-window.mz-inner {
}

Parameters

Over 40 parameters are listed below for customizing Magic Zoom™. Each parameter can be applied via the data-options attribute, for example:

<a href="big.jpg" class="MagicZoom" data-options="zoomPosition: left;"><img src="small.jpg"/></a>

Or parameters may be set globally with the mzOptions variable, e.g.:

<script>
var mzOptions = {
    zoomPosition: 'left'
};
</script>

Mobile

To apply different settings for mobile devices (smartphones in particular), use the mzMobileOptions variable:

<script>
var mzMobileOptions = {
  zoomMode: 'magnifier'
};
</script>

Or use the local attribute data-mobile-options:

<a class="MagicZoom" data-mobile-options="zoomMode: magnifier;">
Parameters for Magic Zoom™
Parameter Default Options Description
zoomMode zoom zoom | magnifier | preview | off How to zoom image
zoomOn hover hover | click When activate zoom
zoomPosition right left | right | top | bottom | inner Position of zoom window
zoomWidth auto <percentage> | <pixels> | auto Width of zoom window
zoomHeight auto <percentage> | <pixels> | auto Height of zoom window
zoomDistance 15 <pixels> Distance from small image to zoom window
zoomCaption off top | bottom | off Position of caption on zoomed image
hint once once | always | off How to show hint
variableZoom false true | false Whether to allow changing zoom ratio with mouse wheel
lazyZoom false true | false Whether to load large image on demand (on first activation)
rightClick false true | false Whether to allow context menu on right click
upscale true true | false Whether to scale up the large image if its original size is not enough for a zoom effect
selectorTrigger click click | hover Mouse event used to swtich between multiple images
transitionEffect true true | false Whether to enable dissolve effect when switching between images
autostart true true | false Whether to start Zoom on image automatically on page load or manually
cssClass   string Extra CSS class(es) to apply to zoom instance
textHoverZoomHint Hover to zoom string Hint that shows when zoom mode is enabled, but inactive. Zoom activates on hover (zoomOn: hover)
textClickZoomHint Click to zoom string Hint that shows when zoom mode is enabled, but inactive. Zoom activates on click (zoomOn: click)

Defaults for mobile

Parameters for Magic Zoom™
Parameter Default Options Description
zoomMode zoom zoom | magnifier | off How to zoom image
textHoverZoomHint Touch to zoom string Hint that shows when zoom mode is enabled, but inactive. Zoom activates on hover (zoomOn: hover)
textClickZoomHint Double tap to zoom string Hint that shows when zoom mode is enabled, but inactive. Zoom activates on click (zoomOn: click)