MagicToolbox.com - Image tools for your website. Contact Us

Magic Zoom™

£29
$45.3 / €34.62

Magic Zoom™ is a JavaScript zoom tool. It's the best way to display images in incredible detail.

Hover over the image...

Choose your design:


Share

Features

  • Fast - fast-loading thanks to the lightweight script.
  • Easy - add it to your website in only 5 minutes!
  • Customisable - change the size, position, colors and more.
  • Smooth - people love to use the smooth action and close-up zooming.
  • Accessible - works if JavaScript is disabled (large image opens as a link).

Demos

Check out more examples of Magic Zoom™.

Customization

Standards

We aim for the highest standards in our code. As such, Magic Zoom™ is:

  • XHTML compliant
  • CSS compliant
  • WAI Priority 3 compliant (AAA)
  • Lightweight code (22kb JS file, 1kb CSS file)

Browser compatibility

Magic Zoom™ works in all modern browsers and many old ones too.

Browser compatibility chart
Win Mac Linux iPhone
Internet Explorer 8 Yes - - -
Internet Explorer 7 Yes - - -
Internet Explorer 6 Yes - - -
Internet Explorer 5.5 Partial - - -
Firefox 3.5 Yes Yes Yes -
Firefox 3 Yes Yes Yes -
Firefox 2 Yes Yes Yes -
Firefox 1 Yes Yes Yes -
Chrome 3 Yes Yes - -
Chrome 2 Yes Yes - -
Chrome 1 Yes Yes - -
Safari 4 Yes Yes - Yes
Safari 3 Yes Yes - -
Safari 2 - Yes - -
Safari 1 - No - -
Opera 10 Yes Yes Yes -
Opera 9 No No No -
Konqueror 3.2+ Yes Yes Yes -

Version history

Magic Zoom™version 3.1
October 26, 2009 - dissolve and cross-fade effect; change title position; show entire image on hover; define options once or for each different zoom..

Magic Zoom™version 3.0
September 2, 2009 - massive new features: activate zoom on click; load large image on click; slow-motion zoom; fade in/out effect; reverse opacity effect; custom settings for each image; improved drag-mode (choose initial position, preserve position; new API functions; settings wizard to help you customise it.

Magic Zoom™version 2.2
July 9, 2008 - Improved IE support when scrolling.

Magic Zoom™version 2.1
May 27, 2008 - Loading message with AJAX-style animated GIF added while large image is downloading. Support for a separate title for each image zoom (when multiple images used).

Magic Zoom™version 2.0
February 14, 2008 - All code improved wherever possible. Easier implementation, more customisation options, fully accessible (degrades gracefully without JavaScript). We're really pleased with this new version - let us know what you think too!

Magic Zoom™ version 1.0
December 1, 2007 - Thanks to all the great feedback we've received, we've now built a dedicated website for Magic Zoom™ and our growing range of products.

Lucky Zoom version 1.0
May 14, 2006 - LuckyZoom is a JavaScript image zoom effect for high resolution images. Cross browser (Firefox, Internet Explorer, Opera, Safari). Lean code. HTML and XHTML compliant. Customisation effects.

FAQ

How do you change the size of the grey window?

The size of the hover area is determined automatically by 3 factors. Change these 3 things and the size will change:
  1. The size of your large image.
  2. The size of your small image.
  3. The size of the zoomed area to the right.

What size should my images be?

A small image size of 250-300px works well with a large image size of 750-1000px. The blue bike example above uses a small image width of 320px and a large image width of 974px.

Why has my dropdown menu started flickering?

If you use a dropdown menu, it needs to have some code to combat an IE bug. This bug is sometimes seen after you install Magic Zoom™, though it is actually caused by the dropdown menu. To fix it, you need to delay the execution of the "mouseout" behaviour of your menu for 20-100ms.

A Flash object is on top of the zoomed image.

A.The most common solution is to set the "wmode" parameter of the Flash object to "transparent" like so:
  1. Add <param name="wmode" value="transparent" /> inside the <object></object>.
  2. If the <embed> tag is present, add this attribute to it: wmode="transparent".
  3. Your code will look something like this:
    <object>
    <param name="wmode" value="transparent" />
    <embed wmode="transparent" />
    </object>

Where can I find mz-packed.js?

The file mz-packed.js (previously lz-packed.js) has been renamed magiczoom.js. It is the JavaScript file which comes bundled with Magic Zoom™. To get it, purchase Magic Zoom™ or download the free trial version.

Buy NowOne site license £29

Free license for non-commercial use

Download Free trial (ZIP 398Kb)

Modules and Plugins



Guarantee

30 day money-back guarantee.

100% Support

30 minutes free technical support.

License

Buy a license for 1 website, 5 websites or unlimited websites.

More Magic

Magictoolbox.com Face book page Magictoolbox.com Twitter Magictoolbox.com on getsatisfaction.com