-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimage_sizes.html
128 lines (112 loc) · 4.06 KB
/
image_sizes.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List image sizes and metadata</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$.getJSON( "https://sandbox.contentdm.oclc.org/digital/iiif-info/coll16/390",
function (data) {
$("#image_info").empty();
var html = '';
html += '<div style="float:left"><img src="' + data.sequences[0].canvases[0].images[0].resource.service['@id'] + '/square/300,/0/default.jpg" class="view" id="' + data.sequences[0].canvases[0].images[0].resource.service['@id'] + '"/></div>';
html += '<table>';
$.each(data.metadata, function(i,field){
html += '<tr><th>' + field.label + '</th><td>' + field.value + '</td></tr>';
});
html += '</table>';
$('#image_info').append(html);
});
$.getJSON( "https://sandbox.contentdm.oclc.org/digital/iiif/coll16/390/info.json",
function (data) {
var html = '';
html += '<form name="" action="" id="showImage">';
html += '<label>Choose image size</label>';
html += '<select name="imageSize" id="imageSize">';
$.each(data.sizes, function(i,size){
html += '<option value="' + data['@id'] + '/full/' + size.width + ',' + size.height + '/0/default.jpg">';
html += '<span id="width">' + size.width + '</span> x <span id="height">' + size.height + '</span></option>';
});
html += '</select>';
html += '</form>';
$('#select_form').append(html);
});
$(document.body).on('change', '#imageSize', function(event) {
console.log($('option:selected', this).text());
console.log($('option:selected', this).val());
event.preventDefault();
window.open($('option:selected', this).val());
});
$(document.body).on('click', '.view', function(event) {
var img = '<img src="' + $(this).attr('id') + '/full/1200,/0/default.jpg" style="width:100%"/>';
$('#photo_popup').css("display", "block");
$('#mySlide').css("display", "block");
$('#mySlide').append(img);
})
$(document.body).on('click', '.close', function(event) {
$('#photo_popup').css("display", "none");
$("#mySlide").empty();
});
});
</script>
<style>
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
img.demo {
opacity: 0.6;
}
</style>
</head>
<body>
<div id="image_info"></div>
<div id="select_form"></div>
<div id="photo_popup" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<div id="mySlide"></div>
</div>
</div>
<!-- https://sandbox.contentdm.oclc.org/digital/iiif/coll16/390/info.json
https://sandbox.contentdm.oclc.org/digital/iiif/coll16/390/full/480,/0/default.jpg
https://sandbox.contentdm.oclc.org/digital/iiif-info/coll16/390
-->
</body>
</html>