M4 Demos examples with different configurations

Mirador demo examples with different configurations

The Mirador demo on Netlify does not only provide the well known default demo whose source code can be found here. Besides their usage in automated integration tests, the HTML files in __tests__/integration/mirador are also served by Netlify and are thus publicly available.

IIIF Authentication API demo

This demo provides several examples for the usage of the IIIF Authentication API 1.0 with Mirador. Mirador does not yet (May 2024) implement IIIF Authorization Flow API 2.0.

• Demo: https://mirador-dev.netlify.app/auth.html
• Source: auth.html

Empty Workspace

Just an empty Mirador workspace without any preconfigured IIIF manifests.

• Demo: https://mirador-dev.netlify.app/blank.html
• Source: blank.html

Collections

This demo show how a collection can be loaded as window resource and how the navigation from a Manifest to a Collection or vice versa works.

• Demo: https://mirador-dev.netlify.app/collections.html
• Source: collections.html

IIIF Content Search API Examples

This demo collects several IIIF Content Search API 1.0 examples, including some services based on the draft version of the API. IIIF Content Search API 2.0 is not supported yet (May 2024).

• Demo: https://mirador-dev.netlify.app/content-search.html
• Source: content-search.html

Multiple Mirador instances embedded in a website

This demo page shows how a single page can embed more than one Mirador instance.

• Demo: https://mirador-dev.netlify.app/multiple-viewers.html
• Source: multiple-viewers.html

Mirador in an iframe

The example loads the Mirador viewer within an iframe element.

• Demo: https://mirador-dev.netlify.app/iframe.html
• Soure: iframe.html

Layers

This demo provides some examples with multiple image layers and and image annotation Choices.

• Demo: https://mirador-dev.netlify.app/layers.html
• Source: layers.html

Static images

This example contains two fixture manifests that do not contain any IIIF Image API services but instead use static images as image resources.

• Demo: https://mirador-dev.netlify.app/level0.html
• Source: level0.html

Minimalist viewer without workspace controls

The minimalist example shows how to use Mirador without the workspace navigation. This is useful in cases where you only want to display a single resource.

• Demo: https://mirador-dev.netlify.app/minimalist.html
• Source: minimalist.html

Viewing direction right to left

This example shows how right-to-left views work in Mirador. While the UI of the application can be configured to be displayed rtl via the underlying MaterialUI theme, resources that need to be displayed rtl have to provide a suitable viewingDirection.

• Demo: https://mirador-dev.netlify.app/rtl.html
• Source: rtl.html

SVG annotations

The SVG annotations demo provides some examples of manifests with annotations that are SVG paths instead of XYWH.

• Demo: https://mirador-dev.netlify.app/svg-annotations.html
• Source: svg-annotations.html

Table of content

The table of content demo uses several Presentation API v2 and v3 manifests that provide logical structures. It has the ToC as the default sidebar panel.

• Demo: https://mirador-dev.netlify.app/table-of-contents.html
• Source: table-of-contents.html

Image / Presentation API v3 with content negotiation

If a service provides both API v2 and v3 resources, the HTTP Accept header can be used for content negotiation. (Beware: the example does only provide correct headers for presentation resources, not for image services.)

• Demo: https://mirador-dev.netlify.app/iiif-v3.html
• Source: iiif-v3.html

Audio / Video examples

This demonstrates Mirador's A/V capabilities with some IIIF cookbook recipe fixtures.

• Demo: https://mirador-dev.netlify.app/video.html
• Source: video.html