IIIF and Mosaic

1. IIIF from Digital.Bodleian viewed with IFrame and Mirador IIIF viewer

This uses an IFrame in the HTML with a Digital.Bodleian IIIF manifest URL 

<iframe frameborder="1" height="600" scrolling="yes" src="https://iiif.bodleian.ox.ac.uk/iiif/mirador/cbfcffe3-7981-459b-b8fe-7ac5a43d54f0/"
    width="600"></iframe>

https://iiif.bodleian.ox.ac.uk/iiif/mirador/cbfcffe3-7981-459b-b8fe-7ac5...

https://iiif.bodleian.ox.ac.uk/iiif/mirador/cbfcffe3-7981-459b-b8fe-7ac5a43d54f0/

 

2. Annona - an annotation library

url: https://ncsu-libraries.github.io/annona/storyboard/

Annona is a JavaScript library that allows users to display W3 Web Annotations in a visual format. The tool comes with 4 options for displaying materials. The views listed below allow users to provide customizable teaching, learning and visualization tools that are usable across all devices.

• Image Viewer: this a simple view that shows the portion of the annotated image, and the corresponding text of that annotation.
• Storyboard Viewer: this is a more dynamic view that provides the entire image in an OpenSeadragon viewer (zoomable, movable image viewer) along with displaying the annotations on the entire image view.
• Multi Storyboard Viewer: provides the same interface as the Storyboard viewer but allows for the comparison of multiple images and annotations next to each other.
• Range Storyboard Viewer: provides the same interface as the Storyboard viewer but allows users to tab through multiple different images. 

Source and further information on Annona 

2.1 Image Viewer

This a simple view that shows the portion of the annotated image, and the corresponding text of that annotation.

<iiif-annotation annotationurl="https://ncsu-libraries.github.io/annona/webannotations/annotation1.json"></iiif-annotation>

 

2.2 Storyboard Viewer

This is a more dynamic view that provides the entire image in an OpenSeadragon viewer (zoomable, movable image viewer) along with displaying the annotations on the entire image view.

<iiif-storyboard annotationurl="https://dnoneill.github.io/annotate/annotations/wh234bz9013-0001-list.json"></iiif-storyboard>

2.3 Multi Storyboard Viewer

Provides the same interface as the Storyboard viewer but allows for the comparison of multiple images and annotations next to each other.

<iiif-multistoryboard annotationurls="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-multistoryboard>

2.4 Range storyboard

This uses the Annona Range Storyboard

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

Provides the same interface as the Storyboard viewer but allows users to tab through multiple different images.

 

3. OpenSeadragon with IFrame

OpenSeadragon https://iiif.bodleian.ox.ac.uk/iiif/image/3b74904c-915b-4168-a078-5e6add617ae6/full/max/0/default.jpg (2862x4000)

https://openseadragon.github.io/openseadragonizer/?img=https%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fiiif%2Fimage%2F3b74904c-915b-4168-a078-5e6add617ae6%2Ffull%2Fmax%2F0%2Fdefault.jpg&encoded=true

OpenSeadragon is a IIIF viewer that can be incorporated into a website or web app, using the OpenSeadragon code base. There is an OpenSeadragon service that can be used to view IIIF images and potentially include them in an IFrame in Mosaic, however, caution should be used with making use of an external service such as this for web content, for example, if it becomes unavailable for any reason. 

Small IFrame 

 

Large IFrame

 

 

As well as knowing what does work, it can be useful to know what doesn't work. Below are some examples of ideas for incorporating IIIF in Mosaic, that do not work in practice.

1. IIIF from Digital.Bodleian - IFrame

A combination of an IFrame tag and a URL for an item from Digital.Bodleian with the following pattern https://digital.bodleian.ox.ac.uk/objects/[uuid]/. This us due to a "Refuse to connect" error message.

Example URL: https://digital.bodleian.ox.ac.uk/objects/cbfcffe3-7981-459b-b8fe-7ac5a43d54f0/

 

https://digital.bodleian.ox.ac.uk/objects/cbfcffe3-7981-459b-b8fe-7ac5a43d54f0/

 

2. IIIF from Digital.Bodleian - IFrame - externally-hosted universal IIIF viewer

A combination of an IFrame with a Digital.Bodleian IIIF manifest viewed using an externally hosted Universal IIIF viewer will not work.

url: https://uv-v4.netlify.app/#?manifest=https://iiif.bodleian.ox.ac.uk/iiif/manifest/cbfcffe3-7981-459b-b8fe-7ac5a43d54f0.json&c=&m=&cv=&xywh=-3785%2C-394%2C12736%2C7875

 

3. IIIF from Digital.Bodleian - IFrame - Exhibit.so

Exhibit.so is a IIIF storytelling tool developed by the University of St Andrews with a digital agency Mnemoscene. Exhibit.so provides a cloud service that allows the creation of a narrative by bringing together IIIF manifests of Cultural Heritage objects together with text, in an easy-to-use user interface.

Use of an IFrame in Mosiac with the URL of a story created at Exhibit.so does not, however, work effectively.

url: https://exhibit.so/exhibits/ddtoxcI8kCszbSWjubY1

4. JavaScript

Custom JavaScript in Mosaic is not supported and will be escaped before it is published.

"); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); gallery.append(""); var facets = Array.from(new Set(['manuscript', 'portrait', 'portrait', 'manuscript', 'manuscript', 'map', 'manuscript', 'panel', 'manuscript', 'manuscript', 'panel', 'portrait'])); buttonDiv.append("show all"); for (i in facets) { buttonDiv.append(`${facets[i]}`); } $(document).ready(function(){ $(".facet").click(function(){ var filterValue = $(this).attr('data-filter'); $('.facet').removeClass('active'); $(this).addClass('active'); if(filterValue == 'all') { $('.all').show('slow'); } else { $('.all').hide('slow'); $(`.${filterValue}`).show('slow'); } }); }); });