Magic Zoom Plus™ integration

It's easy to zoom images on your site. Follow the instructions below, or download a module listed to the right.

1. Installation

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:

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:

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

3. Zoom position

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

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

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:

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:

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

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:

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

6. Internal zoom

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

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:

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.

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:

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:

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

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

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

Defined in the CSS like so:

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

10. 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:

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

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

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

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:

11. Title

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

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

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

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

12. 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:

13. 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:

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

14. Expand caption

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

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

Or via the image title tag:

Or via a <span>:

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

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

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

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

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

15. 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:

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

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

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

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:

17. 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:

18. 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:

You can turn it off like so:

19. 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:

You can turn it off like so:

20. Shadow / glow

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

You can remove the shadow like so:

21. 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:

This is the expand disabled:

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

22. 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:

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.

23. 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:

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:

24. 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:

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:

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

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

        
     

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

Set the width and height of the buttons:

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:

25. 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:

26. Click to activate

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

27. Click to deactivate

You can set the zoomed image to deactivate on click:

28. 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:

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

29. Link to URL

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

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

30. 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:

31. 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:

32. Hover area

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

33. Cursor

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

They are referenced in the magiczoomplus.css file:

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:

34. Click and drag

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

Turn it on like so:

The zoom will move on drag or click. 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:

35. Hide thumbnail

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

36. 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:

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

37. Right click menu

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

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

or for just the expanded image:

38. 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:

39. 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:

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:

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

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

40. 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:

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.