Marten’s blog

PW Zoomer is a JavaScript zoom tool. It’s the best way to display images in incredible detail. It 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.

It works in all the major browsers - Mozilla Firefox 2.0+, Opera 9+, IE 6+ and Safari.

Examples

Example 1

Basic example. After clicking on the thumnail, the main image will change. After clicking on the magnify lens the image will be zoomed in and can be draged.


<script type="text/javascript">
var sz = new PWZoomer();
sz.init(’ex1-magnifier’, ‘ex1-ZToverlay’, ‘ex1-ZTview’, ‘ex1-zoomTn’);
</script>


Example 2

You can change the arrows and lens icons and change their position.


<script type="text/javascript">
var sz = new PWZoomer();
sz.lensZoomInImagePath = ‘./img/zoom-plus.png’;
sz.lensZoomOutImagePath = ‘./img/zoom-minus.png’;
sz.arrowPrevPath = ‘./img/zoom-left-arrow.png’;
sz.arrowNextPath = ‘./img/zoom-right-arrow.png’;
sz.init(’ex2-magnifier’, ‘ex2-ZToverlay’, ‘ex2-ZTview’, ‘ex2-zoomTn’);
</script>


Requested features

• Enable mouse wheel to zoom in/out.
• Add the option to zoom in another div.

Known issues

• Problem with click on zoomed thumbnail in IE6.
• Problem with navigation PNG images in IE6.
• Problem with auto-zoom. Onclick event is lost.

Download: PW Zoomer download