Panning/Zooming/Browsing within a photo [script]
So I’m doing this great new product for 23 and I’ve built some simple code which allows you to navigate large images in a way quite similar to Google Maps. This is what it looks like (best in non-IE browsers for now):
You can navigate the photo like this…
Zoom In: Double-click
Zoom Out: Alt+Double-click
Navigate: Drag photo
Using the code
The code is basically two simple lines of CSS and some JavaScript enclosed in pan.js — if Prototype and Scriptaculous are loaded. You can even have multiple items on one page.
<style type="text/css">
.viewport {border:1px solid #999; position:relative;
height:200px; background-color:black; overflow:hidden;}
.viewport-image {position:absolute;}
</style>
<script src="/script/pan.js"></script>
<div class="viewport">
<img class="viewport-image"
src="/media/crowd.jpg" onload="new Pan(this);"/>
</div>
Nitty-gritty details: The script requires both Prototype and Scriptaculous, but frankly it could be rewritten for any other animation framework in about five minutes. It only uses the morph method from Scriptaculous, if you want to decrease your footprint slightly, you can substitute the two instances of morph with setStyle from Prototype.