How do I get started using OpenSeadragon?

I was wondering how to get started with OpenSeadragon. I have it installed through node.js according to the repository readme on github. Then I was looking at the API and it looks like you have to use the OpenSeadragon.Viewer function. But that is as far as I got. I just want to create a simple page with one deep-zooming image using OpenSeadragon.

Solution

You only need node.js if you're going to be modifying the OpenSeadragon source. If you just want to use OpenSeadragon, grab a built version from http://openseadragon.github.io/#download. Then, assuming your project directory looks like so:

project/
  dzi/
    foo.dzi
    foo_files/
      ...
  index.html
  openseadragon/
    images/
      ...
    openseadragon.js
    openseadragon.min.js

Your index.html could look like so:

<html>
  <head>
    <style type="text/css">
      #foo {
        width: 400px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="foo"></div>
    <script src="openseadragon/openseadragon.min.js"></script>
    <script>
      var viewer = OpenSeadragon({
        id:            'foo',
        prefixUrl:     'openseadragon/images/',
        tileSources:   'dzi/foo.dzi'
      });
    </script>
  </body>
</html>

I guess I should add something like this as a "getting started" on the web site!