M4 Demos examples with different configurations - ProjectMirador/mirador GitHub Wiki
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.
Empty Workspace
Just an empty Mirador workspace without any preconfigured IIIF manifests.
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/__tests__/integration/mirador/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/__tests__/integration/mirador/contentsearch.html
- Source: contentsearch.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/__tests__/integration/mirador/embedding.html
- Source: embedding.html
Mirador in an iframe
The example loads the Mirador viewer within an iframe element.
Layers
This demo provides some examples with multiple image layers and and image annotation Choices.
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.
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/__tests__/integration/mirador/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
.
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/__tests__/integration/mirador/svg_annos.html
- Source: svg_annos.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.
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.)
Audio / Video examples
This demonstrates Mirador's A/V capabilities with some IIIF cookbook recipe fixtures.