8 Great JavaScript Zoom Scripts

A selection of scripts that allow the user to zoom in on content, such as images, so more detail is visible. Perfect for websites, such as clothing retail or art portfolios, where you want to show close ups.

1. MojoZoom

MojoZoom lets you see a zoomed portion of an image by moving the mouse over your chosen area, and then shows the zoomed area in a separate box (either within an automatically generated default box or within an element of your choice). This script also doesn’t rely on a JavaScript framework, which can be helpful.
http://www.nihilogic.dk/labs/mojozoom/

2. MooTools Zoomer

Zoomer is simple image zoom class, which replaces the original image with a zoomed in version inside original boundaries, which you can then scroll around.
http://mootools.net/forge/p/zoomer

3. MooTools Image Zoom

Image Zoom uses two images (the thumbnail and a corresponding large image) which must be proportional in size. Both the thumbnail and zoomed area are visible on the screen at once (located where you choose). When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image to display the appropriate section (thus the importance of the dimensions being proportional).
http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/

4. JQuery jqZoom

This script has a number of options, but generally when you hover over the thumbnail a new, zoomed, image appears in a location of your choosing, which shows the zoomed view of the area you’re hovered over. The size and shape of the hover area can also be determined.
http://www.mind-projects.it/projects/jqzoom/

5. JQuery Cloud Zoom

Cloud Zoom is a great, and small, plugin with lots of options and browser compatibility. A nice feature here is the gallery mode which not all zoom scripts allow for. The choice of a number of high profile retail sites.
http://www.professorcloud.com/mainsite/cloud-zoom.htm

6. JQuery Image Power Zoomer

Image Power Zoomer magnifies part of image on mouseover, showing the zoomed area within a box connected to the mouse (i.e. it works like a magnifying glass, enlarging the part of the image your mouse is over).
http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

7. JQuery Anything Zoomer

Anything Zoomer is a twist on the standard image zoomer as it allows you to enlarge content other than images, e.g. text.
http://css-tricks.com/anythingzoomer-jquery-plugin/

8. JQuery gzoom

The only zoomer in this list that allows the user to determine the level of zoom to apply, via a slider underneath the image.
http://lab.gianiaz.com/jquery/gzoom/

This entry was posted in Top Tips. Bookmark the permalink.