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"
});
</script>
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.