Getting Started with the OpenSeadragon Plugin

The Annotorious OpenSeadragon plugin is an extension to the OpenSeadragon viewer for zoomable high-resolution images. Click or tap the annotation to edit. Hold the SHIFT key while clicking and dragging the mouse to create a new annotation.

Download the latest release and include script and stylesheet file in your web page. Make sure to include the script after the OpenSeadragon script.

<!-- CSS stylesheet -->
<link rel="stylesheet" href="annotorious.min.css">

<!-- JS -->
<script src="openseadragon/openseadragon.3.0.0.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>

Alternatively, grab the files from CDN.

<!-- CSS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.7.7/dist/annotorious.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.7.7/dist/openseadragon-annotorious.min.js"></script>

Important! You must include the stylesheet in the <head> of your page. If you include it anywhere in your <body>, Annotorious will not work when switching OpenSeadragon to fullscreen mode.

Create the viewer and initialize the Annotorious plugin.

<script>
  window.onload = function() {
    var viewer = OpenSeadragon({
      id: "openseadragon1",
      tileSources: {
        type: "image",
        url: "1280px-Hallstatt.jpg"
      }
    });

    // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);

    // Load annotations in W3C WebAnnotation format
    anno.loadAnnotations('annotations.w3c.json');
  }
</script>

The plugin takes a config object as optional second argument. See the API Reference for details.

var anno = OpenSeadragon.Annotorious(viewer, config);

Using NPM

If you use npm, npm install @recogito/annotorious-openseadragon and then

import OpenSeadragon from 'openseadragon';
import * as Annotorious from '@recogito/annotorious-openseadragon';

import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';

const viewer = OpenSeadragon({
  id: "openseadragon",
  tileSources: {
    type: "image",
    url: "1280px-Hallstatt.jpg"
  }
 });

const config = {}; // Optional plugin config options

Annotorious(viewer, config);

A Note on Fullscreen Mode

If you experience the problem that annotations don’t appear in OpenSeadragon fullscreen mode: please make sure that you include the Annotorious stylesheet file (annotorious.min.css) in the <head> of your document!

Reason: when switching to fullscreen mode, OpenSeadragon temporarily removes all content from the page body, and replaces it with the viewer element. If you include the Annotorious stylesheet somewhere inside the body, it will get removed from the page in fullscreen mode, causing annotations to disappear. ALWAYS add the Annotorious stylesheet in the document <head>!