Ajax Control Toolkit Seadragon

• Download source - 609.6 KB

Introduction

Ajax Seadragon is a cool and powerful viewing library that was made by Microsoft Live Labs and implemented in JavaScript so you don't need a Silverlight plug-in or a Flash player installed on your machine to view it. Using Ajax Seadragon, you can simply zoom-in and zoom-out an image.
To view how exactly the images look like and how we can zoom-in and zoom-out an image, visit this web site.

How To Use It?

You can use the Ajax Seadragon in two different ways.

First

You can go to zoom.it website -> Enter the URL of the image and then click on create button -> Click on Embed button which is available at the bottom of the page -> Copy the script tag from textbox and paste into your website or blog to produce the same effect for the image as given by zoom.it website.

Second

Using Deep Zoom Composer

1. Download Deep Zoom Composer and install it.
2. Now open Deep Zoom Composer and create a new project by clicking on "New project".

   

3. Now provide the name and location for the project.
4. Now you will see an import tab, inside the import section you will see an "Add Image..." button, click on this button and select one image and add that image.

   

5. Now click on the "Compose" Tab and Drag the image from the lower section of the deep Zoom Composer to the middle section.
6. Now click on "Fit to screen" or simply press "Ctrl + O" to fit to the screen.

   

7. Now click on the "Export" Tab and select "Output type" as Images, provide name, make the quality 95 and "Export as a composition (Single Image)" then click on "Export".

   

Using Seadragon control in ASP.NET website

1. Add ASP.NET empty website template to the website project and name it as Default.aspx.
2. Copy the dzc-output-files folder and dzc-output.xml from Deep Zoom Composer exported folder to the website project.
3. Right click on website -> Click on Manage Nuget Packages -> Search for Ajax Control Toolkit -> Install the library to your project by clicking on install.
   It will automatically add and register AjaxControlToolkit.dll to the website project.
4. Add ToolkitScriptManager and Seadragon to source view of Default.aspx in body tag as follows.
   
   HTML

   <ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <div align="center">
      <ajaxToolkit:Seadragon ID="sd1" runat="server" Height="350" 
      Width="500" BackColor="Black" SourceUrl="dzc_output.xml" >
      </ajaxToolkit:Seadragon>
    </div>  

   Add the URL of the XML file using the SourceUrl property of Seadragon as above.
5. Just run the project and see the output.

   

Summary

By using Seadragon, we can provide interactive viewing of images in our website and we can use mouse to pan and zoom around the image.