IIIF / Mirador 3: how to limit the number of pages (canvas) available

98 views Asked by At

Is it possible to limit the view of a window to a single canvas from a manifest?

For instance, I would like to show only one or a few pages from this book and not let users get lost in the 127 pages.

One possible option would be to remove altogether the navigation buttons, but I can't find an option to remove them, and display:none; in the css is not having any effect.

enter image description here

1

There are 1 answers

0
RWD On

It's fairly straightforward with a custom request post-processor that just removes the items you don't want to display from the manifest before it's received and stored by Mirador.

mirador.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mirador</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mirador.min.js"></script>
  </head>
  <body>
    <div id="mirador"></div>
    <script type="text/javascript">
      const filterManifestItems = (url, action) => {
        if (action.type === 'mirador/RECEIVE_MANIFEST') {
          const pagesQuery = new URLSearchParams(window.location.search).get('pages')
          if (pagesQuery) {
            const pages = pagesQuery.split(',').map((page) => new Number(page))
            action.manifestJson.items = pages.map((page) => action.manifestJson.items[page - 1])
          }
        }
      }

      Mirador.viewer({
        id: 'mirador',
        windows: [
          {
            manifestId: 'https://sites.dlib.nyu.edu/viewer/api/presentation/books/isaw_plond000002/manifest.json'
          }
        ],
        window: {
          defaultView: 'single',
          views: [
            { key: 'single', behaviors: ['individuals'] }
          ],
        },
        requests: {
          postprocessors: [filterManifestItems]
        }
      })
    </script>
  </body>
</html>

If you save that as an HTML file, then open it in a browser, you will see all of the pages rendered in Mirador. If you then edit the URL in the browser address bar and add, for example ?pages=1,10,100, then you will only see pages 1, 10 & 100.