PW Zoomer



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

4 thoughts on “PW Zoomer

  1. alvaro

    Great script!
    I would like to know if it is possible:

    1. Zoom when clicked anywhere over the image
    2. Go back to “thumbnail” size when clicked again
    3. Make gradual zoom’s for example:
    Click 1 Zoom=50%
    Click 2 Zoom=75%
    Click 3 Zoom=100%

    Thanks!

  2. alvaro

    (sorry points 1 and 2 refer to same thing, click wouldn’t work for zooming back so maybe mouse wheel for zooming instead of click and click for moving around. That would be another question)

  3. Martin M?lek Post author

    @alvaro
    Hi, it’s not possible right now with the code.
    The point 2 is possible, but you will have to change the code. If you will need, please contact me and I’ll tweak it for you.
    With the gradual zoom, I had problems with IE so I postpone this feature to the later date and I didn’t have a time to finish it. Lets say it’s there in alpha version.

    Try this:
    sz.enableWheel = true;

  4. a

    I just couldn’t leave your web site before suggesting that I extremely enjoyed the usual information a person provide in your visitors? Is gonna be again often to check up on new posts.

Leave a Reply

Your email address will not be published. Required fields are marked *