Recently Microsoft released its deep zoom technology implemented in JavaScript using Ajax. Using the Deep Zoom Composer I made a quick composition with it to test it out. Part of this was random curiosity and part was because I was actually looking for something like this to build a High Res photo album.
While things are very intuitive as you could click to zoom in, use your scroll wheel to zoom in or out, pan with a mouse drag etc.. A feature that seemed very obvious (especially for photo albums) was some kind of “Zoom to fit” feature. My thought was, if I double click on specific picture in my gallery then I want to zoom that image to fit the screen.. Double click again should zoom me back out.
While this idea seems simple there are actually a few challenges that must be dealt with Like:
- Event wiring isn’t obvious at first (thank you Aseem Kishore at MS for pointing me in the right direction)
- Seadragon doesn’t know there are multiple images. All it does is manage zooming and scrolling on a large canvas.
- There are event collisions due to single clicks firing with double clicks.
Before we dive into all of the issues let’s take a look at what we want things to look like when we are done.. The below example will allow you to do all the normal Sea dragon things (single click zoom, scroll zoom, pan, full screen, etc) and it will let you zoom to fit any photo by double clicking on it.. And you can Zoom back out by double clicking again.
Now that we know the problem and we see how the solution works let’s talk about how we got here. Basically there are 4 steps..
- Compose a deep zoom composition and export it to Seadragon Ajax & update the export to use the current Seadragon API.
- Override Seadragon’s Mouse events in JavaScript
- Map all of the images using Seadragon’s coordinate system
- Build a way to detect and manage double clicks.
So in the next post I’ll take you thru getting all setup and having a sample composition ready and running locally in your own web browser.