Deep Zoom (Zooming and Panning Images using Silverlight & SeaDragon)
Deep Zoom which is a technology that combines Silverlight with SeaDragon is a powerful and easy way to impliment zooming and panning large images. Below are a few examples.
- Exploration of Very Large or High Resolution Images with Great Performance: Take a huge high resolution image or collection of images (e.g. a map or collection of high-res pics) and allow users to zoom WAY in and pan around the image(s). If you haven't checked out the Hard Rock Cafe Memorabilia site have a look. You can zoom with the mousewheel and pan around by dragging. As the user moves their view, animations are used to give the user the impression that they are "moving" from one place to the other over the images.
- 3-D Photography: Take pictures of a room, one after the other to make a collection of photos that make up a 360 degree picture of the room. Now the user can pan around the room with each photo blending into the other. I haven't tried this yet but I saw a demo somewhere and it seems like it would be relatively easy. Make a nice real-estate app and they can use all the help they can get at the moment.
- Advertisements: You could create a relatively low resolution image to represent the overall theme of the ad, and then have progressively higher resolution images containing more impressions and data about the product. When the page the ad is embedded in first loads, the ad smoothly sharpens and draws the attention of the reader by loading subsequently higher resolution images. In addition, if the user's mouse enters the ad, different parts of the ad can zoom in.
So how to get started developing with Deep Zoom? Well, I'm not going to re-hash what others have already done a great job on. Below is a list of resources. In a few hours you'll have your own cool DZ app up and running:
- Deep Zoom Sample For those who just want to dive straight into code. This app allows you to do all the basic stuff like mousewheel scrolling, and panning around by dragging. This app also provides zoom buttons for users who don't have a scrollwheel or their browser doesn't support them. Compliments to Lutz Gerhard for this. One note: When it comes time for you to use your own source images, you have to compile them into a special format. There is a free (as of writing this) slick tool for doing this called Deep Zoom Composer.
- Deep Zoom Primer (Blog Post): Introduction to Deep Zoom along with step by step code with explanations. Really noise!
- Filter Example (Blog Post): Another useful post including a sample where the images fit within a container and the individual images can be filtered.
Sam
