Ajax Control Toolkit
Seadragon control with default properties

Click on the buttons to zoom in, zoom out, reset zoom, and make the image full screen. You also can drag the image with your mouse or double-click to zoom.

The Seadragon control is written in pure JavaScript. It works with all popular modern browsers.

Learn how to create images that work with the Seadragon control by visiting the Microsoft Live Labs website at http://livelabs.com/seadragon-ajax/.



Seadragon with a scalable overlay and a regular control

This sample demonstrates two overlays that appear on top of the Seadragon control. The first overlay contains a standard ASP.NET Menu control. When you pan or zoom the image, the overlay remains static.

The second overlay is a scalable overlay. It changes size when you zoom in and out of the image.

Seadragon Description

The Seadragon control can be used for interactively viewing images. Use your mouse to pan and zoom around the image.

Learn how to create images that work with the Seadragon control by visiting the Microsoft Live Labs website at http://livelabs.com/seadragon-ajax/.

Seadragon Properties

First example above is initialized with this code.

<ajaxToolkit:Seadragon ID="Seadragon"
	runat="server"
	SourceUrl="sample.xml">
	CssClass="seadragon"
</ajaxToolkit:Seadragon>

Second example above is initialized with this code.

<ajaxToolkit:Seadragon ID="Seadragon2"
  runat="server"
  CssClass="seadragon"
  SourceUrl="dzc_output.xml">
  <ControlsCollection>
    <ajaxToolkit:SeadragonControl runat="server"
      Anchor="TOP_RIGHT">
      <asp:Menu runat="server" ...>
        set menu style
        <Items>
          <asp:MenuItem Text="Menu" Value="Menu" />
          <asp:MenuItem Text="Control" Value="Control" />
          <asp:MenuItem Text="Over" Value="Over" />
          <asp:MenuItem Text="Seadragon" Value="Seadragon" />
        </Items>
      </asp:Menu>
    </ajaxToolkit:SeadragonControl>
  </ControlsCollection>
  <OverlaysCollection>
    <ajaxToolkit:SeadragonScalableOverlay 
      runat="server"
      Rect-Height="0.24"
      Rect-Width="0.26" 
      CssClass="overlay" 
      Rect-Point-X="0.14" 
      Rect-Point-Y="0.06"     
    </ajaxToolkit:SeadragonScalableOverlay>
  </OverlaysCollection>
</ajaxToolkit:Seadragon>
  • animationTime - The amount of time in seconds that animations should last. Default is 1.5.
  • blendTime - The amount of time in seconds that new tiles take to blend from transparent to opaque. Default is 0.5.
  • alwaysBlend - Whether tiles should always blend in and out, not just when they're first loaded. Default is false.
  • autoHideControls - Whether controls should get automatically hidden when the user's mouse is off the viewer and the image has stopped animating. Default is true.
  • immediateRender - Whether the most appropriate tiles should always be rendered first, before any lower-res tiles are rendered. This loses the "sharpening" effect and instead creates a very visible "tiling" effect. Default is false.
  • minZoomDimension - The minimum size (in screen pixels) of either dimension that can result from zooming out. Default is 16.
  • maxZoomPixelRatio - The maximum pixel ratio (screen pixel to content pixel) that can result from zooming in. Default is 4.
  • visibilityRatio - The minimum portion of the viewport that must show visible content in both dimensions. Default is 0.1.
  • springStiffness - Determines how sharply the springs used for animations move. Default is 5.0.
  • imageLoaderLimit - The maximum number of concurrent image downloads that can be performed by each viewer. Default is 2.
  • clickTimeThreshold - The maximum number of milliseconds that can pass between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 200.
  • clickDistThreshold - The maximum number of pixels the mouse can move between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 5.
  • zoomPerClick - The factor by which images should zoom when clicked on. Default is 2.
  • zoomPerSecond - The factor by which images should zoom over each second when the zoom buttons are held down. Default is 2.
  • sourceUrl - The path for all UI images. This can be absolute or relative. If relative, it must be relative to the HTML page. A change to this value will only affect new viewers. Default is "img/".
  • showNavigationControl - Whether navigation buttons should be shown.



Copyright © 2006-2009 Microsoft Corporation. All Rights Reserved.