Research Guides: IIIF Libguide Examples: Home

IIIF Examples

Here are a few examples of how IIIF enabled images and documents can be added to a guide. The examples use an embedded Mirador viewer and a simple configuration script supported by the Willamette University Libraries.

Most of the embedded viewers below show the book L'Orégon et les côtes de l'océan Pacifique du nord, from Willamette University Digital Collections. But any IIIF-enabled item from this or any other repository that supports IIIF could be used.

Here's how you get the HTML Snippet for an embedded iframe. In DSpace, find the item you want to embed. Click on the overflow icon (the 3 vertical dots in the header) and choose "Share." Then copy the code snippet shown in the "embed" option. Then just embed this code in your guide (using the HTML Source option in the libguides editor).

You can add additional HTML parameters to the iframe code snippet as needed. These are shown below.

Simple Embedded viewer

This is the default you get when using the "share" option in Mirador.

HTML Snippet:

<iframe allowfullscreen="" frameborder="0" height="420" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/manifest" title="Image viewer" width="560"></iframe>

Document opened at Selected Page

This iframe uses the "canvas" query parameter to specify the canvas to load at startup.

HTML Snippet

<iframe allowfullscreen="" frameborder="0" height="420" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/manifest&canvas=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/canvas/c274&showInfo=false" title="Image viewer" width="560"></iframe>

Extra Parameter:

canvas=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/canvas/c274

Link to external viewer

You can also link to an external viewer. Here's an example of a link that opens our example document to page 275.

View L'Orégon et les côtes de l'océan Pacifique du nord online.

Here's the link:

https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/manifest&canvas=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/canvas/c274&showInfo=true

Embedded viewer with Info Panel open

This example adds the "showInfo" parameter. It tells Mirador to start with the info side panel open.

HTML Snippet:

<iframe allowfullscreen="" frameborder="0" height="420" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/manifest&showInfo=true" title="Image viewer" width="560"></iframe>

Extra Parameter:

showInfo=true

Viewer opened in side-by-side page view

This example has a few problems but it is worth including. It uses the "book" parameter, which tells Mirador to use the side-by-side page view. At this time, the Manifests returned by the DSpace IIIF integration include a "viewingHint" that overrides the viewer setting. I need to reevaluate that since it may make sense to remove the viewingHint from Manifests and let IIIF viewers choose the default view via their configuration. In the meantime, our viewer script will force the viewer to use the "book" view when this parameter is true. That creates a problem for searching within the document since the side-by-side page view breaks word highlighting in Mirador. If you want the viewer to support search, do not set the "book" parameter.

HTML Snippet:

Extra Parameters:

book=true

canvas=https://digitalcollections.willamette.edu/server/iiif/8459ec5b-4488-4ae1-94ce-3b99b24d2d31/canvas/c14

From another university

You're not limited to local images. Here's an image from the Yale University Art Gallery.

HTML Snippet:

<iframe allowfullscreen="" frameborder="0" height="420" src="https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://manifests.collections.yale.edu/yuag/obj/34123&showInfo=false&book=true" title="Image viewer" width="560"></iframe>