jQuery Pan/Zoom

Just a little experiment, playing with jQuery to make a zoom and pan plug-in. It's probably not production-ready. E.g., I can't be bothered to test it in Internet Explorer. :-)

Demo

Click on an image to zoom in. When you're zoomed in, you can move around the image.

Usage

Step 1: download the script (alternately, get the minified version) and put it on your server somewhere.

It's pretty simple to set up and use. Define a container element with any number of <a> tags, each containing a single <img> tag. The href attribute of the <a> tag should point to the large version of the image. The src attribute of the <img> tag should point to the small version. For example:

<ul class="panzoom">
   <li><a href="http://static.zooomr.com/images/8435886_7079af8f56_b.jpg"><img 
      src="http://static.zooomr.com/images/8435886_7079af8f56_m.jpg" alt=""></a></li>
   <li><a href="http://static.zooomr.com/images/8435881_d05a25ff0e_b.jpg"><img 
      src="http://static.zooomr.com/images/8435881_d05a25ff0e_m.jpg" alt=""></a></li>
   <li><a href="http://static.zooomr.com/images/8435868_cb3e82ae9c_b.jpg"><img 
      src="http://static.zooomr.com/images/8435868_cb3e82ae9c_m.jpg" alt=""></a></li>
   <li><a href="http://static.zooomr.com/images/8435865_014cd9c644_b.jpg"><img 
      src="http://static.zooomr.com/images/8435865_014cd9c644_m.jpg" alt=""></a></li>
   <li><a href="http://static.zooomr.com/images/7332840_754b11462d_o.jpg"><img 
      src="http://static.zooomr.com/images/7332840_2b7e3f3161_m.jpg" alt=""></a></li>
</ul>

Next, include jQuery somewhere on the page and somewhere after that include the plugin (please do not link to the plugin on my server, rather copy it to yours, thanks!).

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yourserver.com/path/to/jquery.panzoom.js"></script>

The last step is to include something like the following script on your page (or, preferably, in a script included after the other two):

<script type="text/javascript" charset="utf-8">

// call pan/zoom plugin on document.ready
$(function () {
   $.panzoom();
});

</script>

Note: by default the plugin looks for <a> tags in container objects with the CSS class name panzoom If you want to use something else, just pass a valid CSS selector in as a parameter to $.panzoom(). E.g., if your <a> tags sit in an element with the ID "mycontainer" you could do the following:

<script type="text/javascript" charset="utf-8">

// call pan/zoom plugin on document.ready
$(function () {
   $.panzoom('#mycontainer a');
});

</script>

Note 2: you can use this plugin without the need for thumbnail images by setting both the <img> src and <a> href attributes to the large size image and setting the smaller size (the size displayed by default) in the CSS. For example, the following code uses the larger size image and sets the image size directly in the <img> tag:

<ul class="panzoom">
   <li><a href="http://static.zooomr.com/images/8435886_7079af8f56_b.jpg"><img 
      style="width: 240px;height: 180px;" src="http://static.zooomr.com/images/8435886_7079af8f56_b.jpg" alt=""></a></li>
</ul>
Was this page useful to you? Loading...