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.
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.
Using Deep Zoom Composer
- Download Deep Zoom Composer and install it.
- Now open Deep Zoom Composer and create a new project by clicking on "New project".
- Now provide the name and location for the project.
- 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.
- Now click on the "Compose" Tab and Drag the image from the lower section of the deep Zoom Composer to the middle section.
- Now click on "Fit to screen" or simply press "Ctrl + O" to fit to the screen.
- 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
- Add ASP.NET empty website template to the website project and name it as Default.aspx.
- Copy the dzc-output-files folder and dzc-output.xml from Deep Zoom Composer exported folder to the website project.
- 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.
Seadragon to source view of Default.aspx in body tag as follows.
<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server"></ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:Seadragon ID="sd1" runat="server" Height="350"
Width="500" BackColor="Black" SourceUrl="dzc_output.xml" >
</div> Add the URL of the XML file using the
SourceUrl property of
Seadragon as above.
- Just run the project and see the output.
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.