- Important Notes on use
- Multistoryboard Settings
- With Images
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.
|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
|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
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.
Matchclick is the settings that only applies to multi storyboards. See settings table for global storyboard settings.
<iiif-storyboard url="https://ncsu-libraries.github.io/annona/webannotations/mc00084-001-te0159-000-001-0001-list.json;https://ncsu-libraries.github.io/annona/webannotations/ua023-015-003-bx0002-004-026-list.json" styling="matchclick: true;customid:matchclick;"></iiif-storyboard>
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 https://data.getty.edu/museum/api/iiif/366589/info.json which has a width 5127 and height of 6513. The loaded image is https://tools.wmflabs.org/zoomviewer/iipsrv.fcgi/?iiif=cache/8937e1777945b722457fac2cde0cf61b.tif/info.json 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='https://dnoneill.github.io/annotate/annotations/04fbbb28-d5a7-4408-b7da-800c4e65eda3-list.json' images='https://dlcs.io/iiif-img/3/2/8034eb5b-9c90-4471-ad68-52124232ec0c/info.json'></iiif-storyboard>