Props Values
url URL for the range of annotations or a manifest with at least one annotation link or embedded annotation. In the manifest annotations should be in the OtherContent (v2.0) or items (v3.0) field. that are going to be loaded into the viewer.
styling string structured styling. See settings table for more options
ws link to web socket. Should have a wss:// or ws:/ preceding instead of https:// or http://. See web sockets section about how to set up

Additional Icons

See toolbar icon table for other icons.

Icon Keyboard Shortcut Purpose
alt+p(window)/option+p(mac) or alt+,(windows)/option+,(mac) or alt+(window)/option+(mac) This will go to the next annotation in the list
alt+n(window)/option+n(mac) or alt+.(windows)/option+.(mac) or alt+(window)/option+(mac) This will go to the previous annotation in the list
y Show the per page modal.

Manifest Examples

<iiif-storyboard url="https://iiif.bodleian.ox.ac.uk/iiif/manifest/748a9d50-5a3a-440e-ab9d-567dd68b6abb.json" styling="overlaynext: true"></iiif-storyboard>

fols. 2b and 3a & fols. 32b and 33a are particularly cool

<iiif-storyboard url="https://wd-image-positions.toolforge.org/iiif/Q64686074/P18/manifest.json"></iiif-storyboard>

This manifest has only one annotation so it appears as a regular storyboard.

Range Examples

<iiif-storyboard url="https://tomcrane.github.io/iiif-collector/objects/longer-article.json"></iiif-storyboard>

<iiif-storyboard url="https://ncsu-libraries.github.io/annona/webannotations/range.json" styling="togglelayers: true;"></iiif-storyboard>

Custom List of storyboards

The range storyboard allows for you to create a list of custom storyboard and multistoryboards in a json. An example can be seen at the following url: https://ncsu-libraries.github.io/annona/webannotations/storyboardlist.json.

An empty template is avaliable.

The JSON should reflect the example in the link above.

<iiif-storyboard url="https://ncsu-libraries.github.io/annona/webannotations/storyboardlist.json"></iiif-storyboard>

Collection Examples

The range storyboard allows for you to load a IIIF collection into the viewer.

<iiif-storyboard url="https://research.ng-london.org.uk/iiif-projects/json/ng-projects.json"></iiif-storyboard>

From the Page: Example of collections with Annotations

<iiif-storyboard url="https://fromthepage.com/iiif/collection/jeremiah-white-graves-diaries"></iiif-storyboard>

Notes about creating a range

  • Currently the application expects that if the canvases field exists it is the same length as the annotation list.
  • canvases is not a required field assuming the annotation already has the manifest defined in the annotation.
  • Highest level label field is used for the title for each annotation.