6 Amazing JavaScript Image Zoom Scripts


Usability research shows that the quality of images is a weakness of many web sites, especially in e-commerce applications. Potential customers should be able to view large and detailed product images to evaluate what they’re after. By providing them a way to zoom in your images, you can greatly increase your conversion. Here are some JavaScript image zoom scripts to consider.

Rvolve Zoompics

Rvolve Zoompics

Rvolve Zoompics

Rvolve Zoompics is a smooth zooming Javascript tool, that works by animating a camera lens zoom when you click on the image. The HTML5 script is free, provided a Rvolve logo is shown in the corner, or priced at $29.99 for a white label edition. Adding the tag to your site is almost as simple as adding an ‘img’ tag, with options including auto-zoom, auto-pan, or static scaling. The script works on modern tablet devices (e.g. iPad) and also older browsers.

MojoZoom

MojoZoom

MojoZoom

MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it. It places a square to the right of the image with the magnified portion of the image. In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version. The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work.

Magic Zoom

Magic Zoom

Magic Zoom

Magic Zoom is a commercial JavaScript zoom tool with its price starting at $25 for a single license. Available in several different versions, it works by hovering your mouse over the image to see a magnified version of it. Magic Zoom loads the high-resolution image in the background thus allowing your page to load faster. It offers several customization options like skinning, size and supports multiple image zooms.

JQZoom

JQZoom

JQZoom Evolution

JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework.  jQzoom is a great and a really easy to use script to magnify what you want. It supports different type of zooming like standard, reverse and zoom without lens. If you’re familiar with jQuery, you can add several effects to your zoomed images like fade in or fade out.

TJPzoom

TJPzoom

TJPzoom

TJPzoom is more or less similiar to other image zoom solutions but it offers a few other options. For example when hovering over an image, you can drag up and down to increase or decrease the zoom ratio. Similarly dragging left or right will increase or decrease the zoom window size. If you specify a high resolution image, TJPZoom will use it when someone zooms on your image showing the little details of your image. The script is compatible with all major browsers including Internet Explorer 6, and setting it up takes roughly less than a 5 minutes.

Mootools JavaScript image zoom

MooTools Zoom

MooTools Zoom

Based on the Mooltools JS framework, this script attempts to mimic zoom effect we see in Flash applications. It works by assigning a thumbnail of your image to its corresponding high resolution version that should be in proportional size. The zoomed area can be updated by either moving the zooming region on the thumbnail or by dragging the zoomed image. Styles are set up into stylesheet so that no modifications need to be made from JavaScript.

Related Posts:

9 Responses to “6 Amazing JavaScript Image Zoom Scripts”

  1. Jessica Says:

    Nice this are great for my site, I wanted to set up a gallery and this sure is perfect..

  2. Atlanta Business Wealth Network Says:

    Do you have any actual statistics on the conversion increase? I’d like to know how significantly that increases conversion.

    Thanks

    Atlanta Business Wealth Network

  3. dave Says:

    The last example (which is very good) does not appear to have a demo on first view!
    UNTIL you search really hard for it….
    So to make it easier for others here is the demo:
    http://www.php-help.ro/example.....mage_zoom/

  4. Magic Toolbox Says:

    Thanks for blogging about us Ahmed. However, your post is now out of date… we just released version 3.0 of Magic Zoom.

    It redefines amazing :)

    http://www.magictoolbox.com/magiczoom_examples/

    Also worth pointing out that we are the original creators of this effect – since February 2006.

  5. Intro to Javascript – Resources « mylevel4.com Says:

    [...] Image zoom [...]

  6. Mark Says:

    Since this post many other image zoom scripts came out. Some of them worth taking a look at:

    Cloud Zoom – free clone of Magic Zoom:
    http://www.professorcloud.com/.....d-zoom.htm

    AJAX-ZOOM – must see:
    http://www.ajax-zoom.com/index.php?cid=examples

  7. Vadim Jacobi Says:

    Mark: thanks for mentioning AJAX-ZOOM. In the latest version we have achieved a similar mouse over effect with some extras like stepless zoom and using image tiles, which allows the source image to be of virtually any resolution. Following is a direct link to the experiment:

    http://www.ajax-zoom.com/examples/example20.php

  8. Royah Says:

    Hi ,
    I uploaded pictures from database, has any body know how to zoom on them in my website please?
    Thanks

  9. matbaa Says:

    I use this picture of my projects often feature is really very grateful thank you

Leave a Comment