jQuery Pan/Zoom

Just a little experiment, playing with jQuery to make a zoom and pan plug-in. It's probably not production-ready. I.e. 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 and put it on your server somewhere (in other words, please do not just link to the copy on my server; it could change or be deleted at any time!).

Step 2: 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:

<div class="panzoom">
  <a href="imgs/arenal-hanging-bridge.jpg"><img src="imgs/arenal-hanging-bridge.jpg" alt=""></a>
  <a href="imgs/kings-canyon.jpg"><img src="imgs/kings-canyon.jpg" alt=""></a>
  <a href="imgs/mima-mounds.jpg"><img src="imgs/mima-mounds.jpg" alt=""></a>
  <a href="imgs/nevada.jpg"><img src="imgs/nevada.jpg" alt=""></a>
  <a href="imgs/olympia.jpg"><img src="imgs/olympia.jpg" alt=""></a>
  <a href="imgs/seattle-ferry.jpg"><img src="imgs/seattle-ferry.jpg" alt=""></a>
</div>

Step 3: 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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//yourserver.com/path/to/jquery.panzoom.js"></script>

Step 4: 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 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 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 (caution: you must set both the width and the height for this to work):

<div class="panzoom">
   <a href="imgs/seattle-ferry.jpg"><img 
      style="width: 240px;height: 240px;" src="imgs/seattle-ferry.jpg" alt=""></a>
</div>