Deep Zoom: Selecting an Image

After reading Kirupa's excellent blog post about filtering images in a Deep Zoom Collection, I decided to take it one step further. Deep Zoom has the potential to allow us to think way outside the box. There have already been some great examples of this, such as: Jose Fajardo's demo and Deep Earth. I'm sure there are a few other great examples out there, but those 2 really demonstrate true potential for this technology.

In Kirupa's example of how to filter images in a Deep Zoom Collection, there is an associate metadata.xml file that is created when you export you Deep Zoom Collection. The properties that are currently exported for each multiscale image are:

• File name
• X coordinate
• Y coordinate
• Width
• Height
• Z order
• Tag

I was mainly interested in accomplishing 2 things; having a list of images that came from the metadata.xml file and having the ability to select an image and bring it into view.

Since the metadata.xml file contains the file name (including the images source folder) I could easily loop through those tags and grab all of the images. I wanted to show these images as thumbnails. At this time, there is not an easy way to generate a thumbnail from the deep zoom collection. I manually resized my images and saved them off by appending "thumb_" in front of each image. Now that I had my thumbnails I could loop through the metadata.xml file, pull off the file name tag and associate that image with its corresponding thumbnail.

Each thumbnail is then placed in my ImageSlider control (great control Denislav Savkov). I tweaked the ImageSlider control to my liking and added repeatButtons for scrolling left and right so the user could hold down the mouse for a faster scroll. In the SelectionChanged event of the ImageSlider control I match up the thumbnail with the corresponding deep zoom image and then set the multiscale image control's viewport accordingly to bring that deep zoom image into view.

EDIT (June 26): The 'bug' is really no bug at all, instead a misunderstanding on my part. It turns out that the y coordinate is relative to the image's width. It also has to be negative ... negative goes down, right? (Thanks to Jaime Rodriguez and her blog post to clear this up!)

And there you have it, a simple way to see a collection of thumbnails and select the appropriate image to get the corresponding deep zoom image. If you have any questions / comments please let me know. And always, the source code is attached, enjoy!