AJAX Control Toolkit – Seadragon Control with Deep Zoom

Seadragon Control

The Seadragon control enables you to pan, zoom, and make an image full screen. The control performs all of these fancy image effects using pure JavaScript and it works with any modern web browser.

You can try out Seadragon by visiting the following web page. Click on the image of the bicycle that appears half-way down the page.

http://livelabs.com/seadragon-ajax/

The Seadragon control displays a menu of buttons:

You can also use your mouse to drag the image from side to side – you can stitch lots of images together to create a truly humongous image that you can drag through using Deep Zoom Composer.

In order to use the Seadragon control, you need to (1) Create the image (2) Add the Seadragon control to a page. James Senior has created a great video quick start that demonstrates how you can use the Seadragon control for the Channel9 website:

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

Creating an Image with Deep Zoom Composer

Before you can display an image with the Seadragon control, you must first process the image with a tool named the Deep Zoom Composer.

After you install Deep Zoom Composer, you can convert an image into a format that is compatible with the Seadragon control. When you launch Composer, the following dialog appears:

Read More @ New AJAX Control Toolkit Release

Also there is a screencast on using the control by James Senior

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

About these ads