Magic Zoom Plus™ integration

It's easy to zoom images on your site. Follow the instructions below.

1. Installation

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


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

  1. Download the Magic Zoom Plus™ demo.
  2. Upload the magiczoomplus folder to your website.
  3. Reference the magiczoomplus.js and magiczoomplus.css files before the </head> of your page. Example:

    <link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css"/>
    <script type="text/javascript" src="magiczoomplus/magiczoomplus.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. Link your small image to your large image with a class of MagicZoomPlus. Example:

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

  5. You've done it! To upgrade, buy a license (or request free license) then overwrite the magiczoomplus.js file with your licensed version.

Get inspiration from these examples or download more examples (zip). Use the wizard to choose your perfect settings. If you need help, please contact us.

Now lets look at how to customize Magic Zoom Plus™...

2. Zoom size

Change the size of the zoomed area with zoom-width and/or zoom-height parameters. The default size is 300px by 300px. Here is a smaller zoom window:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-width:290px; zoom-height:152px"><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="MagicZoomPlus" rel="zoom-width:400px; zoom-height: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="MagicZoomPlus" rel="zoom-width:70%; zoom-height:100%"><img src="small.jpg"/></a>

3. Zoom position

Adjust the location of the zoomed image with zoom-position. Try these examples for left, top, bottom, right:

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

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

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-distance: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 a div. Place your div anywhere in your code and position it with CSS. Example HTML:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-position:#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.

4. Expand size

If the large image is taller or wider than the users screen, it will automatically scale down to fit the screen and can pan/zoom on hover. Instead, you can also fix the size of the enlarged window, for example:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-size: height=300px"><img src="small.jpg"/></a>

You can also show the image at its original size like so:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-size:original"><img src="small.jpg"/></a>

5. Expand position

The image will enlarge into the center of the screen by default. You can change it to enlarge to a fixed position, for example the top right:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-align:screen; expand-position:top=0,right=0"><img src="small.jpg"/></a>

You can also make it enlarge to a position relative to the small image:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-align:image; expand-position:bottom=0,left=200"><img src="small.jpg"/></a>

6. Internal zoom

Zoom inside the image by setting the zoom-position to inner. Example:

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

7. Pan & zoom

If the large image is bigger than the available screen space, it will be scaled down. The user can pan and zoom into it. For example:

You can disable the pan-zoom effect by setting it to false:

<a href="big.jpg" class="MagicZoomPlus" rel="pan-zoom:false"><img src="small.jpg"/></a>

8. 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 trainers. There are 3 images - big, small and tiny.

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

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



You can swap the images on hover with selectors-change. To prevent unintentional swapping, a short delay of 200 miliseconds is added. This can be adjusted with selectors-mouseover-delay:



<a href="trainer1big.jpg" class="MagicZoomPlus" id="trainers" rel="selectors-change:mouseover; selectors-mouseover-delay:100"><img src="trainer1small.jpg"></a>

4 different effects can be used to change images via selectors-effect. The default effect is dissolve (used in the example above). False will remove the effect so the images swap immediately.

Pounce will expand and contract the images:



<a href="trainer1big.jpg" class="MagicZoomPlus" id="trainers" rel="selectors-effect:pounce"><img src="trainer1small.jpg"></a>

Fade will brighten the image towards white and dissolve it at the same time:



<a href="trainer1big.jpg" class="MagicZoomPlus" id="trainers" rel="selectors-effect:fade"><img src="trainer1small.jpg"></a>

You can also adjust the speed of the effect with selectors-effect-speed (default is 400ms). For example:

<a href="trainer1big.jpg" class="MagicZoomPlus" id="trainers" rel="selectors-effect-speed:800"><img src="trainer1small.jpg"></a>

You can highlight the current thumbnail using CSS and add hover effects. In the example below, a class of Selector has been created:



<a href="1big.jpg" class="MagicZoomPlus" id="trainers" rel="selectors-class: Active"><img src="1small.jpg"></a>

<a href="1big.jpg" rel="zoom-id:trainers" rev="1small.jpg" class="Selector"><img src="1tiny.jpg"/></a>
<a href="2big.jpg" rel="zoom-id:trainers" rev="2small.jpg" class="Selector"><img src="2tiny.jpg"/></a>
<a href="3big.jpg" rel="zoom-id:trainers" rev="3small.jpg" class="Selector"><img src="3tiny.jpg"/></a>

Defined in the CSS like so:

.Selector img {
border: 2px solid #E0DEB5;
}
.Selector.Active img {
border: 2px solid #777544;
}

Even more customizations are available. Place the images literally anywhere on your page. Use any number of images. Switch between the images via thumbnails or text or even a form object (e.g. dropdown or button). All sorts of setups are possible - contact us if you need any help.

9. 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, only the first large in a group of multiple images will download. The other large images will download when the user hovers over the image. This reduces the total file-size of your page because many of visitors won't look at those large images. Visitors that click those images must wait briefly while they download.

If you prefer instant image loading, you can preload all large images like so:

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

10. Alignment

Align the zoom to any edge of your main image. By default it aligns to the top right edge. To adjust it, change the zoom-align parameter to left, top, bottom or center. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-align: center"><img src="small.jpg"/></a>

11. Hint

A hint is displayed on the image to indicate that the image is zoomable. It can be text or an image or both. The hint can be removed like so:

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

The text can be changed with hint-text. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="hint-text:Any text you want!"><img src="small.jpg"/></a>

You can also use hint-text to remove the text and show the icon only:

<a href="big.jpg" class="MagicZoomPlus" rel="hint-text:;"><img src="small.jpg"/></a>

To change the icon to a different image, open magiczoomplus.css and replace hint.gif with another image. Examples:

.MagicZoomHint {
background: url(graphics/icon-of-your-choice.gif);

You can move the hint to any corner (top left, top right, bottom left, bottom right) or centrally (top center, bottom center) with the hint-position parameter (tl / tr / tc / bl / br / bc). Example:

<a href="big.jpg" class="MagicZoomPlus" rel="hint-position: br; hint-text: Awesome detail!;"><img src="small.jpg"/></a>

12. Title

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

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

The caption can be turned off by setting show-title to false. Or it can be moved to the bottom, for example:

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

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

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

To hide the title, either delete it or set show-title to false.

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

13. Expand speed

Define how long the enlarge and restore effects take (in milliseconds). The default is 500ms and the restore effect is the same (unless you define it separately). Example:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-speed:1000; restore-speed: 200"><img src="small.jpg"/></a>

14. Expand effect

Five effects can be used to enlarge the image:

  • Linear - expands at steady rate.
  • Cubic - starts fast, then slows down.
  • Back - shrinks, then enlarges too much, then shrinks to correct size (default).
  • Elastic - enlarges too much, then shrinks to correct size.
  • Bounce - enlarges then contacts, twice.

Try the effects:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-effect:cubic"><img src="small.jpg"/></a>

Combine the expand-effect and expand-speed to create your ideal look. For example:

<a href="big.jpg" class="MagicZoomPlus" rel="expand-effect:cubic; expand-speed:2000"><img src="small.jpg"/></a>

15. Expand caption

There are 5 ways to add text to the enlarged image. The default is via the link title tag:

<a href="big.jpg" class="MagicZoomPlus" title="Here is some text"><img src="small.jpg"/></a>

You can also show a caption via the image alt tag:

<a href="big.jpg" class="MagicZoomPlus" rel="caption-source:img:alt"><img src="small.jpg" alt="Here is some text"/></a>

Or via the image title tag:

<a href="big.jpg" class="MagicZoomPlus" rel="caption-source:img:title"><img src="small.jpg" title="Here is some text"/></a>

Or via a <span>:

<a href="big.jpg" class="MagicZoomPlus" rel="caption-source:span"><img src="small.jpg"/><span>Here is some text</span></a>

Or by using a <div> which can include HTML, for example:

This is a heading

This is more text. And this is bold. You can put any HTML in this caption: buttons, images, tables, even forms! Over to you to get creative...

<a href="big.jpg" class="MagicZoomPlus" rel="caption-source:#example"><img src="small.jpg"/></a>

<div id="example">

<h3>This is a heading</h3>

<p>This is more text. <strong>And this is bold!</strong></p>

</div>

The most popular way to add links, bold or italics is with <div> but you can use <span> like so:

<a href="big.jpg" class="MagicZoomPlus"><img src="small.jpg"/><span>Here is some <strong>bold text</strong> and <em>italic text</em> and [a href="example.html"]here is a link[/a]</span>.</a>

The caption slides out from under the image. You can adjust the default speed (250 milliseconds) or turn it off like so:

<a href="big.jpg" class="MagicZoomPlus" rel="caption-speed:0"><img src="small.jpg"/><span>Here is some text</span></a>

You can place the caption to the bottom, left or right of the image. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="caption-position:right; caption-speed:0; caption-width: 200; show-title:false;" title="This is a long description of the image. This caption is positioned to the right."><img src="small.jpg"/></a>

To change the font, colours and borders, edit the MagicThumb-caption style within the magiczoomplus.css file. Example:

.MagicThumb-caption {
color: #535120;
font-family: Georgia, serif;
font-size: 20pt;
background: #D4CC81;
border: 0 !important;
outline: 0 !important;
text-align: center !important;
}

16. Background

The default background is black with 30% opacity. You can change it to any other color or opacity.

This example has a green background with 50% opacity:

<a href="big.jpg" class="MagicZoomPlus" rel="background-opacity:50; background-color:#89853D"><img src="small.jpg"/></a>

You can also adjust the duration of the fade effect (normally 200ms), for example:

<a href="big.jpg" class="MagicZoomPlus" rel="background-speed:2200; background-opacity:80; background-color:#000000"><img src="small.jpg"/></a>

You can remove the background by setting the opacity to zero:

<a href="big.jpg" class="MagicZoomPlus" rel="background-opacity:0"><img src="small.jpg"/></a>

17. 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="MagicZoomPlus" 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="MagicZoomPlus" rel="show-loading:false"><img src="small.jpg"/></a>

This animated GIF shows to the left of the loading message. The file location is determined in magiczoomplus.css. You can replace it with your own GIF if you wish.

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

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

18. 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="MagicZoomPlus" rel="opacity:77"><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="MagicZoomPlus" rel="opacity-reverse:true"><img src="small.jpg"/></a>

19. Smoothing

Smoothing is an effect to gradually decelerate the zoom to a stop. You can change the speed (40 is default) to a value from 0 (slow) to 99 (fast). Example:

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

You can turn it off like so:

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

20. Fade in/out

You can slowly fade in the zoomed image to give a more subtle effect. You can adjust the speed (in milliseconds) like so:

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

You can turn it off like so:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-fade: false;"><img src="small.jpg"/></a>

21. Shadow / glow

A drop shadow shows behind the zoomed image. You can change this effect to a glow like so:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-window-effect: glow"><img src="small.jpg"/></a>

You can remove the shadow like so:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-window-effect: false"><img src="small.jpg"/></a>

22. Zoom / enlarge only

Magic Zoom Plus™ has 2 ways to zoom images. By default, it will zoom on hover and expand on click. You may disable either or both.

This is the zoom disabled:

<a href="big.jpg" class="MagicZoomPlus" rel="disable-zoom: true"><img src="small.jpg"/></a>

This is the expand disabled:

<a href="big.jpg" class="MagicZoomPlus" rel="disable-expand: true"><img src="small.jpg"/></a>

Both are disabled below, so you can just swap between images:



<a href="big.jpg" class="MagicZoomPlus" rel="disable-expand:true; disable-zoom:true; selectors-change:mouseover; selectors-mouseover-delay:0; selectors-effect-speed:0;"><img src="small.jpg"/></a>

23. Hotspots

Special areas on your image can be assigned certain functions. We call these hotspots.

Click on a hotspot and something happens. The most popular action is to open an image - here is a good example.

Use the hotspots parameter in the rel and place your hotspot images inside a div with an id of your choice and a class of MagicHotspots. The example below will create 2 hotspots on the image:

<a href="big.jpg" class="MagicZoomPlus" rel="hotspots:just-an-example"><img src="small.jpg"/></a>

<div id="just-an-example" class="MagicHotspots">
<a href="image2.jpg" coords="115,145,135,165" class="MagicThumb"></a>
<a href="image3.jpg" coords="130,75,196,110" class="MagicThumb"></a>
</div>

Use the coords attribute to specify the size of the hotspot - measured from the top left corner of the image.

Look at 2 more hotspot examples in the demo zip file and contact us if you would like help.

24. Slideshow

Users can click from one image to the next in a slideshow style. Three effects are available: dissolve one image into the next; fade images towards white; expand and contract each image from a thumbnail. Choose your effect like so:

<a href="big1.jpg" class="MagicZoomPlus" rel="slideshow-effect:expand"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicZoomPlus" rel="slideshow-effect:expand"><img src="small2.jpg"/></a>
<a href="big3.jpg" class="MagicZoomPlus" rel="slideshow-effect:expand"><img src="small3.jpg"/></a>

All images on your page with Magic Zoom Plus™ will be in your slideshow. If you only want a few images in the slideshow, you can group them like so:

<a href="big1.jpg" class="MagicZoomPlus" rel="group:fireworks; slideshow-effect:expand"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicZoomPlus" rel="group:fireworks; slideshow-effect:expand"><img src="small2.jpg"/></a>
<a href="big3.jpg" class="MagicZoomPlus" rel="group:fireworks; slideshow-effect:expand"><img src="small3.jpg"/></a>

25. Buttons

Forward, back and close buttons are shown in the corner of the enlarged image. You can set them to hide or autohide (shows only while mouse is over image). Example:

<a href="big.jpg" class="MagicZoomPlus" rel="buttons:autohide"><img src="small.jpg"/></a>

The buttons are automatically positioned to the top right on Windows and Linux and the top left on Mac OS. You can override this by fixing them to the top left, top right, bottom left or bottom right. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="buttons-position:top right"><img src="small.jpg"/></a>

All three buttons will show (next, previous, close). Alternatively, you can choose which buttons to show. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="buttons-display:next,close"><img src="small.jpg"/></a>

Magic Thumb™ comes with 7 sets of buttons, each with 3 sizes (18px, 24px, 32px). These are the 24px buttons:

buttons1.png   buttons2.png   buttons3.png   buttons4.png
buttons5.png   buttons6.png   buttons7.png

The first set of buttons is the default. To use a different set, edit the CSS, for example:

.MagicThumb-buttons {
background: transparent url(graphics/buttons-4.png) no-repeat 0 0;
}

Set the width and height of the buttons:

.MagicThumb-buttons {
height: 24px;
}

.MagicThumb-buttons a {
width: 24px;
height: 24px;
}

If you are feeling creative, design your own buttons! Place all 6 buttons on one image. The top three are the default state and the bottom three are the mouseover state.

If your site is multi-lingual, you can customize the tooltip on the next/prev/close buttons by using the MagicZoomPlus.lang option. For example:

<script type="text/javascript">
MagicZoomPlus.lang = {
'button-previous': 'Previous',
'button-next': 'Next',
'button-close': 'Close'
};
</script>

26. Initialization

The large image is downloaded automatically on page load. To reduce your bandwidth usage, you can set the large image to download on click or on hover (known as lazy loading). The user experience is reduced because there is a delay before viewing the image, but it has the benefit of reduced data transfer. To download the large image on hover or click, use the initialize-on parameter like so:

<a href="big.jpg" class="MagicZoomPlus" rel="initialize-on: mouseover;"><img src="small.jpg"/></a>

27. Click to activate

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

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

28. Click to deactivate

You can set the zoomed image to deactivate on click:

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

29. Trigger

Expand is normally triggered on click. If you disable the zoom, then you might want to trigger the expand on hover / mouseover like so:

<a href="big.jpg" class="MagicZoomPlus" rel="disable-zoom:true; expand-trigger:mouseover"><img src="small.jpg"/></a>

The mouseover trigger has a 500 millisecond delay to prevent it activating by mistake. You can increase/decrease the delay like so:

<a href="big.jpg" class="MagicZoomPlus" rel="disable-zoom:true; expand-trigger:mouseover; expand-trigger-delay:100"><img src="small.jpg"/></a>

30. Link to URL

Clicking the enlarged image will close it. Instead, you can make the enlarged image a link to another page. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="link:/buy/magiczoomplus/"><img src="small.jpg"/></a>

The link can open in the current window, a new window or a frame. Example:

<a href="big.jpg" class="MagicZoomPlus" rel="link:/buy/magiczoomplus/; link-target:_blank"><img src="small.jpg"/></a>

31. Show 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, or smaller. Example:

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

32. Borders & colors

To change borders and colors, edit the styles in magiczoomplus.css. For example, to remove the border around the zoomed image, change the CSS style to:

.MagicZoomBigImageCont {
border: none;
}

33. Hover area

Change the color and border of the mouse hover area (default is grey) by editing the MagicZoomPupsyle. Example:

.MagicZoomPup {
border: 2px solid #658EC2;
background: #658EC2;
cursor: move;
}

34. Cursor

These two cursors come in the graphics folder of Magic Zoom Plus™:

Zoom-in cursor (do not use this file, it is a PNG not the CUR file that you need) Zoom-out cursor (do not use this file, it is a PNG not the CUR file that you need)

They are referenced in the magiczoomplus.css file:

.MagicZoomPlus, .MagicZoomPlus:hover {
cursor: url(graphics/zoomin.cur), pointer;

.MagicZoomPup {
cursor:url(graphics/zoomin.cur),move;

.MagicThumb-expanded {
cursor: url(graphics/zoomout.cur), pointer;

If the cursor url in your CSS is incorrect, the default browser cursor will be used.

You may design your own cursor. Here are a couple more to choose from:

This is a PNG file. Click to view and download the .cur file. This is a PNG file. Click to view and download the .cur file.

35. Click and drag

The zoomed image can be shown on click/drag instead of on hover.

Turn it on like so:

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

The zoom will move on drag or click. You can turn off the latter option like so:

<a href="big.jpg" class="MagicZoomPlus" 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="MagicZoomPlus" 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="MagicZoomPlus" 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="MagicZoomPlus" rel="drag-mode:true; preserve-position:true"><img src="small.jpg"/></a>

36. Hide thumbnail

You can hide the thumbnail when it is clicked like so:

<a href="big.jpg" class="MagicZoomPlus" rel="keep-thumbnail:false; "><img src="small.jpg"/></a>

37. Keyboard navigation

The expanded images can be controlled with key strokes like so:

  • Left arrow or Up arrow or Page up - previous image
  • Right arrow or Down arrow or Page down - next image
  • Space bar - next image
  • Escape - close

You can disable keyboard shortcuts like so:

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

Or you can require the user to also press the Ctrl key (e.g. Ctrl + Left arrow) like so:

<a href="big.jpg" class="MagicZoomPlus" rel="keyboard-ctrl:true"><img src="small.jpg"/></a>

38. Right click menu

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

<a href="big.jpg" class="MagicZoomPlus" rel="right-click:true"><img src="small.jpg"/></a>

You can also permit right click for just the original image:

<a href="big.jpg" class="MagicZoomPlus" rel="right-click:original"><img src="small.jpg"/></a>

or for just the expanded image:

<a href="big.jpg" class="MagicZoomPlus" rel="right-click:expanded"><img src="small.jpg"/></a>

39. 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 the FPS. Example:

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

40. API

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

  • MagicZoomPlus.start() - starts all zooms on the page.
  • MagicZoomPlus.start(id) - starts a particular zoom by #id.
  • MagicZoomPlus.stop() - stops all zooms on the page.
  • MagicZoomPlus.stop(id) - stops a particular zoom by #id.
  • MagicZoomPlus.refresh() - refreshes all zooms on the page.
  • MagicZoomPlus.refresh(id) - refreshes a particular zoom by #id.
  • MagicZoomPlus.update(id) - updates a particular zoom by #id.
  • MagicZoomPlus.zoomIn(id) - shows a particular zoom by #id.
  • MagicZoomPlus.zoomOut(id) - hides a particular zoom by #id.
  • MagicZoomPlus.expand(id) - expands a particular image by #id.
  • MagicZoomPlus.restore(id) - restores a particular image by #id.

The MagicZoomPlus.update(id) method accepts up to 4 parameters:

MagicZoomPlus.update(id, big-image, small-image, extra-options)

If you just need to update the settings, leave big-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:

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

There are all sorts of uses. Here are a few:







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

41. Z-index

If your zoomed image is hidden behind some other content on your page, you can bring the zoom to the front by setting the z-index in the magiczoomplus.css file. Open the file and add this class:

.MagicZoomPlus {
z-index: 10002;
}

The value of 10002 can be changed to any value - whatever is high enough to move it in front of the item that is hiding the zoom.

42. Parameters

Over 70 parameters are listed below. Either follow the instructions below or use this wizard to generate the code for your site.

Each parameter can either be applied via the rel attribute, for example:

<a href="big.jpg" class="MagicZoomPlus" rel="zoom-width: 400; hint:false; opacity:70; "><img src="small.jpg"/></a>

Alternatively, parameters can be applied via a script tag. Be sure to add commas after all variables, except the last one (otherwise Internet Explorer will throw a JavaScript error). Example:

<script type="text/javascript">
MagicZoomPlus.options = {
'zoom-width': 400,
'hint': false,
'opacity': 70

};
</script>

Parameters for Magic Zoom Plus™
Parameter Default Options Description
Position & Geometry
zoom-width 300 <pixels> or <percentage>
e.g. zoom-width: 400; or zoom-width: 100%;
Width of zoom window
zoom-height 300 <pixels> or <percentage>
e.g. zoom-height: 400; or zoom-height: 100%;
Height of zoom window
zoom-position right left / right / top / bottom / inner / #id (new) Position of zoom window relative to small image
zoom-align top right / left / top / bottom / center Where to align zoom window against image (new)
zoom-distance 15   Distance from small image to zoom window (px)
expand-size fit-screen fit-screen / original / width(px) / height(px)
e.g. expand-size: width=500; or expand-size: height=300;
Size of the expanded image (new)
expand-align screen screen / image Align the expanded image relative to screen or small image
expand-position center center / coordinates
e.g. expand-position: top=0, right=25; or expand-position: bottom=100, left=100;
Precise position of the expanded image (px)
Effects
opacity 50 0-100 Opacity of hovered area
opacity-reverse false true / false Add opacity outside mouse box
smoothing true true / false Enable smooth zoom movement
smoothing-speed 40 1-99 Speed of smoothing
zoom-fade true 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)
zoom-window-effect shadow shadow / glow / false Apply shadow or glow behind the zoom (new)
expand-speed 500 0-10000 Expand duration (ms)
restore-speed 0-10000 Restore duration (ms)
expand-effect back linear / cubic / back / elastic / bounce Effect for expanding image
restore-effect auto linear / cubic / back / elastic / bounce Effect for restoring image
keep-thumbnail true true / false Show/hide thumbnail when image expanded
expand-trigger click click / mouseover Trigger for the expand effect
expand-trigger-delay 500 0-1000 Delay before mouseover enlargement (ms)
restore-trigger auto auto / click / mouseout Trigger for the shrink effect
fps 25   Frames per second for zoom effect
Multiple images
selectors-change click click / mouseover Method to switch between multiple images (new)
selectors-mouseover-delay 60   Delay before switching thumbnails (ms)
selectors-effect dissolve dissolve / fade / pounce (new) / false Dissolve, cross fade or pounce thumbnail when switching thumbnails
selectors-effect-speed 400   Speed of dissolve/fade effect (ms)
selectors-class   any name Define a CSS class of the active selector (new)
preload-selectors-small true true / false Preload small images (new)
preload-selectors-big false true / false Preload large images (new)
zoom-id   id of main image Specify which images can be swapped
Hint
hint true true / false Display a hint to suggest that image is zoomable (new)
hint-text Zoom    Show text in the hint (new)
hint-position tl tl / tr / tc / bl / br / bc Position of the hint, top left, top right, etc. (new)
hint-opacity 75 0-100 Opacity of the hint text/image (new)
Title & Caption
show-title top top / bottom / false Position of title on zoomed image (false = hidden)
title-source title title / #id Source of the title text (new)
caption-source a:title span / img:alt / img:title / a:title / #id Source of caption text under the expanded image
caption-speed 250 0-10000 Speed of caption slide effect (ms)
caption-position bottom bottom / right / left Where to position the caption
caption-height 300   Max height of bottom caption (px)
caption-width 300   Max width of left/right caption (px)
Background
background-color #000000 Background color of expanded image
background-opacity 30 0-100 Background opacity, 0 = disabled
background-speed 200 0-10000 Duration of background fade (ms)
Initialization
initialize-on load load / click / mouseover When to download large image (new)
click-to-activate false true / false Click to show the zoom
click-to-deactivate false true / false Click to hide the zoom (this will also deactivate expand effect) (new)
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
Zoom mode
disable-zoom false true / false Turn off the zoom effect
entire-image false true / false Show the entire large image on hover
fit-zoom-window true true / false Resize zoom window if big image is smaller than zoom window
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)
preserve-position false true / false Remember position of zoom for multiple images and 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)
Expand mode
disable-expand false true / false Turn off the expand effect
pan-zoom true true / false Zoom/pan the expanded image (new)
buttons show show / hide / autohide Whether or not to show buttons
buttons-position auto auto / top left / top right / bottom left / bottom right Corner location of buttons
buttons-display previous, next, close previous / next / close Show 1, 2 or all 3 buttons
slideshow-effect dissolve dissolve / fade / expand Slideshow from one image to next
slideshow-speed 500 0-10000 Speed of slideshow effect (ms)
slideshow-loop true true / false Restart slideshow after last image
group   any name Group images together into a set
link   http://www.example.com Link the expanded image to a URL
link-target _self _blank / _self / _parent / _top Open link in browser window/frame
keyboard true true / false Ability to use keyboard shortcuts
keyboard-ctrl false true / false Require the Ctrl key to permit shortcuts
css-class   any name Apply different styles to different images
z-index 10001 The z-index for the expanded image
Other
hotspots   any text The id of the div with your hotspots
right-click false true / original / expanded / false Show the browser menu on right-click (new)