Code to install Mirador on a static html page - OscarSeip/oscarseip.github.io GitHub Wiki

The following code can be pasted into a static html webpage (e.g. index.html) in order to display the Mirador viewer. Note that you also need to create a style.css file in the same root directory.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
</head>

<body>
<h1>My Mirador</h1>
<div id="mirador"></div>

<script type="text/javascript">

  const mirador = Mirador.viewer({
    "id": "mirador",
    "selectedTheme": "dark",
    "openManifestsPage": true,
    "workspace": {
    "isWorkspaceAddVisible": true
    },

  "catalog" : [
      {"manifestId": "https://v3.lib.virginia.edu/catalog/uva-lib:830320/iiif/manifest.json", "provider": "University of Virginia Library"}, /* Perrière, Le theatre de bons engins, 1540 */
      {"manifestId": "https://raw.githubusercontent.com/OscarSeip/oscarseip.github.io/master/Manifests/6AVF8YTD/manifest.json", "provider": "BSB"}, /* Cardano, Artis magnae, 1545 */
  ],
  "annotations": {
"htmlSanitizationRuleSet": 'iiif', // See src/lib/htmlRules.js for acceptable values
"filteredMotivations": ['oa:commenting', 'oa:tagging', 'sc:painting', 'commenting', 'tagging'],
},  
  });
</script>
</body>
</html>

Then, in order to add your own manifests, you can replace the examples that are provided in the "catalog" with your own.

When using Github (in example 2) please note to always use the 'raw' link.

raw button

You can find additional configuration options here: https://github.com/ProjectMirador/mirador/blob/master/src/config/settings.js

The code to install Mirador has been modified from: https://glitch.com/edit/#!/mirador-start?path=README.md%3A1%3A0 where you can find additional guidance.

⚠️ **GitHub.com Fallback** ⚠️