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.


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');

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');

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

8 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%


  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

    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.

  5. RaquelSmall

    I have checked your website and i’ve found some duplicate content,
    that’s why you don’t rank high in google, but there
    is a tool that can help you to create 100% unique articles,
    search for; Boorfe’s tips unlimited content

  6. Schuckers

    We realize just about all pertaining to the compelling channel a person provide strong methods about this website and for that reason highly motivate factor via various other versions within this topic even though our personal little one is actually obtaining a good deal. Spend playtime with the area of all seasons.

  7. Beckey

    May your site possess a get in touch with web page? I’m experiencing difficulty tracking down the idea yet, I’d love to shoot anyone a contact. I’ve obtained several ideas for your blog you might be enthusiastic about ability to hear.

Leave a Reply

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