Overview
These are notes on how to use Scroll View in Mirador 3.
The following example uses “Kagoshima Seitoki no Uchi: The Battle at Takase River Crossing - Nozu’s Brigade Recaptures the Regimental Flag” (held by the National Diet Library).
This IIIF manifest consists of three canvases (images), and in the default display mode (Single), images are shown one at a time.
Our goal is to display all three connected together.
Demo
You can try it out at the following link:
https://nakamura196.github.io/mirador-multi-image/
The IIIF manifest file is a modified version of the one published by the National Diet Library.
- Before modification
https://dl.ndl.go.jp/api/iiif/1301543/manifest.json
- After modification
https://nakamura196.github.io/mirador-multi-image/manifest.json
As a modification, although not directly related to the Scroll View purpose of this article, "viewingDirection": "right-to-left" was added so that images are displayed from right to left.
Mirador Configuration
In Mirador 2, Scroll View was available without any pre-configuration, but in Mirador 3’s default settings, Scroll View appears to be disabled.
To enable it, modify the initial settings of Mirador 3 as follows:
https://github.com/nakamura196/mirador-multi-image/blob/main/docs/index.html
The key point is views: [{ key: "single" }, { key: "gallery" }, { key: "scroll" }]. By adding Scroll View here, it now appears as a selectable option as shown below:
References
Bug When defaultView Is Not Specified
If the default view is not specified, the Single view is used in the above example, but switching to Scroll View by pressing the button in that state sometimes did not work correctly.
This issue was avoided by setting defaultView: "scroll" as shown above. I plan to investigate the fundamental solution further.
Scroll Display in the National Diet Library Digital Collections
The National Diet Library Digital Collections, the source of the material used in this example, also provides a “continuous display” mode in their viewer.
Custom Implementation Example
Initially, I thought Scroll View was not implemented in Mirador 3, and I planned to add it as a Mirador plugin. As preliminary research, I created a prototype using OpenSeadragon. If anyone plans to implement their own version, I hope this serves as a useful reference.
- Demo
https://github.com/nakamura196/openseadragon-multi-image
The following page was helpful:
https://openseadragon.github.io/examples/multi-image/
The source code is available here:
https://github.com/nakamura196/openseadragon-multi-image
Summary
I hope this serves as a useful reference for using Scroll View (continuous display) in Mirador 3.