rzoom – a pure JavaScript image magnifier

• July 29, 2012 – rzoom has been released publicly

rzoom is a pure and simple JavaScript image magnifier. You can extend it and modify easily. It supports modern browsers including IE7.

Pure JavaScript

Sometimes you can’t use a widget written in jQuery or other libraries. rzoom will come in handy in such situations.

Zoom in / zoom out

With the mouse roll you can zoom in or out easily.

Automatic detection

If a scaled image is smaller than its original, rzoom is automatically disabled.

Supports many browsers

When I tested it in January it worked even in IE7. But IE7 is not relevant these days

Remembers settings

When you have many images, each image remembers its zoom level.

Respects ‘auto’ CSS value

rzoom respects CSS auto value of width or hight attributes if you want to preserve the aspect ratio.

2 ways of initiating

You can use the add method either in onload event handler or on its own.

Load the widget first:

<script type="text/javascript" src="widget/lib/magnifier.js"></script>
<script type="text/javascript">
	var magnifier = magnifier();
</script>

Initiate it on an image:

<img src="01.jpg" style="width: 400px; height: auto" onload="magnifier.add( this );" />
<img src="02.jpg" style="width: auto; height: 400px" onload="magnifier.add( this );" />

You don’t need to use add method in the onload event handler. You can use it anywhere. Just pass it an IMG DOM element.

You can use, modify and fork rzoom. But respect the license!

The widget provided is as is. Don’t expect me to implement special features for you. Don’t expect me to help you to implement it on your site. rzoom is not meant for beginners who don’t read manuals. Before you ask, read the documentation carefully.

If you need to contact me, send me a PM on github. Advice, ideas how to improve it are welcomed!