Magic Zoom™
£29
$47 / €33
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:
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™.
Installation guides
Use Magic Zoom™ on any website. Download a module/plugin for a specific platform:
Customization
- Customization guide - 18 ways to adjust the size, position and effects!
- Customization wizard - easy way to adjust the settings to your liking.
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.
| Windows | Mac | Linux | iPhone | |
|---|---|---|---|---|
| Internet Explorer 8 |  |
- | - | - |
| Internet Explorer 7 | |
- | - | - |
| Internet Explorer 6 | |
- | - | - |
| Internet Explorer 5.5 |  |
- | - | - |
| Firefox 3.5 | |
|
|
- |
| Firefox 3 | |
|
|
- |
| Firefox 2 | |
|
|
- |
| Firefox 1 | |
|
|
- |
| Chrome 3 | |
|
- | - |
| Chrome 2 | |
|
- | - |
| Chrome 1 | |
|
- | - |
| Safari 4 | |
|
- | |
| Safari 3 | |
|
- | - |
| Safari 2 | - | |
- | - |
| Safari 1 | - |  |
- | - |
| Opera 10 | |
|
|
- |
| Opera 9 | |
|
|
- |
| Konqueror 3.2+ | |
|
|
- |
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
Q. How do you change the size of the grey window?
A. The size of the hover area is determined automatically by 3 factors. Change these 3 things and the size will change:
- The size of your large image.
- The size of your small image.
- The size of the zoomed area to the right.
Q. What size should my images be?
A. 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.
Q. Why has my dropdown menu started flickering?
A. 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.
Q. 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:
- Add <param name="wmode" value="transparent" /> inside the <object></object>.
- If the <embed> tag is present, add this attribute to it: wmode="transparent".
- Your code will look something like this:
<object>
<param name="wmode" value="transparent" />
<embed wmode="transparent" />
</object>
Q. Where can I find mz-packed.js?
A. 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.
Guarantee
If you are not totally satisfied with this JavaScript image zoomifier, just tell us why and we will make a full refund to you - no questions asked.
License options
Buy a license for 1 website, 5 websites or an unlimited number of websites (great for web developers and agencies).
Apply for a free license of Magic Zoom™ if your website is non-commercial (does not make money).
By using Magic Zoom™, you agree to our license agreement.
Trial version
The free trial version will let you test Magic Zoom™. It comes with the JavaScript and CSS code plus sample HTML and an image. Download free trial.
Support
Follow the integration instructions to add Magic Zoom™ to your website.
Get free support on the forum or hire us for paid support and we'll do the integration for you.
Happy customers
I love your tools ... Paul Lips
Incredibly useful ... Ed Mass
Great effect ... Kathryn Blackwell
Payment
Payments are processed by PayPal and Google Checkout. You just need a credit card. You can download your product immediately after payment.
LuckyZoom or Magic Zoom?
The new name for LuckyZoom is Magic Zoom™. All our products are now called Magic Something.
Join our newsletter
Receive one email every 6 weeks about new products, discounts, freebies. No spam. More info.
©2010 Magic Toolbox About | Contact | Support | Affiliates | Newsletter | Testimonials | License Agreement | Terms | Privacy