-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (59 loc) · 3.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
<head>
<title>IIIF Photo Viewer</title>
<meta charset="utf-8" />
<!-- Bootstrap css for this page only -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch"></script>
<script src="dist/iiif-photowall.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<strong id="header-title">IIIF Photo wall</strong>
</a>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center" style="margin-bottom:0px">
<div class="container">
<h1 class="jumbotron-heading" id="main-title"></h1>
<p class="lead text-muted" id="description"></p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div id="photowall" class="justified-gallery">
<!--<a href="https://iiif.gdmrdigital.com/image/iiif/2/personal%2Faustria-2018%2FIMG_0636.jp2/full/full/0/default.jpg" class="swipeboxExampleImg">
<img alt="Title 1" src="https://iiif.gdmrdigital.com/image/iiif/2/personal%2Faustria-2018%2FIMG_0636.jp2/full/512,/0/default.jpg"/>
</a>-->
</div>
</div>
<pre>
</pre>
</div>
</main>
<script>
// Possible to send a call back for the manifest metadata
function fillMetadata(manifest, config) {
document.getElementById('main-title').innerHTML = iiifPhotoWall.getMetadataField(manifest, "label", 'en');
if (manifest["description"] != null) {
document.getElementById('description').innerHTML = iiifPhotoWall.getMetadataField(manifest, "description", 'en');
}
}
var config = {};
// Call function above to show the metadata
config.showMetadata = fillMetadata;
// Configure the gallery div id
config.div = 'photowall';
config.rowHeight = '200';
var qs = /manifest=(.*)/g.exec(window.location.search);
var jsonURL = qs[1];
iiifPhotoWall.loadURL(jsonURL, config);
</script>
</body>
</html>