OpenSeadragon API

Getting Started

OpenSeadragon has no external dependencies. To install, download and copy the openseadragon folder into your web root or static files directory, add it to your page, and create a viewer with new OpenSeadragon.Viewer(options) or OpenSeadragon(options) for short.

Here is an example of basic usage:

<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="/openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "/openseadragon/images/",
        tileSources: "/path/to/my/image.dzi"

OpenSeadragon will also return an AMD module when required with a loader like Require.js.

You will, of course, need zooming image data to work with. See Creating Zooming Images.

For more information on the options object you pass in to OpenSeadragon(), see OpenSeadragon.Options. To learn more about the viewer that it creates, see OpenSeadragon.Viewer. For programmatic control of zoom and pan, see OpenSeadragon.Viewport.

For other advanced topics, see our Examples & Features pages.

If you are working directly from the file system (accessing your web page from file:///path/to/your/file.htm) you may need to change your browser's local files security policy so that your zooming image data can be loaded. Alternatively, you can run a local server. You can find help on both methods in three.js documentation.