This replaces the need for websockets for comparing two or more annotations. It works exactly the same as the Storyboard and has all the same settings. The bolded props are the only changes in regards to input.

Props Values
annotationurls Annotation urls separated by ;.
annotationlists This has been moved to annotationurls. If you want to recreate the previous look of annotationurl that is now doable with the settings. Multiple ListAnnotation or PageAnnotation separated by ;. See “@type” or “type” in annotation. i.e.
manifesturl iiif manifest url, only required when annotation does not contain manifest
styling string structured styling. See settings table and multistoryboard settings 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
images Should be a IIIF info.json URL(s) separated by ;. Images that can be loaded into the multi storyboard without annotations. This is useful for viewing the same image without having the annotate two or more images.

Important Notes on use

  • Annotations should be separated by a ; in the props
  • Settings and ws are set the same way as in the storyboard
  • Annotation lists should be the same length; Otherwise some weird things can happen.
  • When clicking on the overlays they will go the same position on each image not the same annotation. This is a conscious choice to allow for comparison at a certain point.
  • Wait for all images to load before using the toolbar.

Multistoryboard Settings

Matchclick is the settings that only applies to multi storyboards. See settings table for global storyboard settings.


Without matchclick

<iiif-storyboard url=";"></iiif-storyboard>

With matchclick

<iiif-storyboard url=";" styling="matchclick: true;customid:matchclick;"></iiif-storyboard>

With Images

This setting works similarly to layers in the storyboard viewer. This will load the image next to the annotation(s). Note The annotation is on the image which has a width 5127 and height of 6513. The loaded image is and has a width of 3864 and height of 5076. Due to the height differentials, zooming on the smaller image will move to a different section than the larger image. It can not be avoided but should be kept in mind when using this functionality.

<iiif-storyboard url='' images=''></iiif-storyboard>