Seadragon Ajax: Getting Started
To use the Seadragon Ajax Library, include this script in the <head> section of your page:
<script type="text/javascript"
src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>
Then, to create a Seadragon Ajax viewer, simply instantiate the Viewer class, passing in a container <div> or its id. The <div> needs to have been loaded by the browser, so a best practice is to do this only once the page has finished loading. We've done this by listening to the window's "load" event.
You'll also want to add the appropriate CSS styles to the <div>, most importantly width and height. You'll probably want a background and border, as well, but be sure to set the text color accordingly so that error messages are visible.
After the Viewer has been instantiated, you can open a Deep Zoom Image by calling the openDzi() method with the URL of the image. You'll now have a fully functional Seadragon Ajax viewer, with full mouse support and navigation controls out of the box.
The rest of these pages show some common uses of the library, and you can always learn more by exploring the API reference.
Example
Source Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://seadragon.com/ajax/0.8/seadragon-min.js">
</script>
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("container");
viewer.openDzi("carina-nebula.dzi");
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
<style type="text/css">
#container
{
width: 500px;
height: 400px;
background-color: black;
border: 1px solid black;
color: white; /* for error messages, etc. */
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
