-
Notifications
You must be signed in to change notification settings - Fork 0
/
11.html
99 lines (86 loc) · 4.33 KB
/
11.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
<!DOCTYPE html>
<html><head>
<title>JuxtaposeJS Embed</title>
<meta charset="utf-8">
<meta name="description" content="JuxtaposeJS Embed">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
#juxtapose-embed {
width: 100%;
max-width: initial;
}
</style>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
<link rel="alternate" type="application/json+oembed" href="https://oembed.knightlab.com/juxtapose/?url=https%3A%2F%2Fcdn.knightlab.com%2Flibs%2Fjuxtapose%2Flatest%2Fembed%2Findex.html%3Fuid%3D0f3f022c-05a0-11eb-bf88-a15b6c7adf9a"></head>
<body>
<div id="juxtapose-embed" class="juxtapose" style="height: 224px; width: 400px;"><div class="jx-slider"><div class="jx-handle " style="left: 64.5%;"><div class="jx-arrow jx-left"></div><div class="jx-control"><div class="jx-controller" tabindex="0" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><div class="jx-arrow jx-right"></div></div><div class="jx-image jx-left " style="width: 64.5%;"><img src="images/11_then.jpg" alt=""></div><div class="jx-image jx-right " style="width: 35.5%;"><img src="images/11_now.jpg" alt=""></div><a href="https://juxtapose.knightlab.com" target="_blank" rel="noopener" class="jx-knightlab"><div class="knightlab-logo"></div><span class="juxtapose-name">JuxtaposeJS</span></a></div></div>
<script type="text/javascript" src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js"></script>
<script type="text/javascript">
function getURLParameter(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
function createJuxtapose(json) {
// https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
var msie = document.documentMode;
if (msie < 9) {
json.images[0].src += "?" + new Date().getTime();
json.images[1].src += "?" + new Date().getTime();
}
slider = new juxtapose.JXSlider('#juxtapose-embed', json.images, json.options);
}
var uid = getURLParameter('uid');
if (uid.indexOf('http') === 0) {
var url = uid;
} else {
if (uid[uid.length - 1] == '/') {
uid = uid.substr(0, uid.length - 1);
}
var url = 'https://s3.amazonaws.com/uploads.knightlab.com/juxtapose/' + uid + '.json';
}
if (url) {
// https://stackoverflow.com/questions/20624476/xdomainrequest-cors-for-xml-causing-access-is-denied-error-in-ie8-ie9
var xhr = new XMLHttpRequest();
var ie = false;
if ("withCredentials" in xhr) {
xhr.open('get', url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
url = url.replace(/^https:\/\//i, 'http://');
xhr = new XDomainRequest();
xhr.open('get', url);
ie = true;
}
xhr.onload = function() {
if ((xhr.readyState == 4 && xhr.status == 200 && !ie) || ie) {
var json = JSON.parse(xhr.responseText);
createJuxtapose(json);
}
};
setTimeout(function() {
xhr.send();
}, 0);
}
var head = document.head || document.getElementsByTagName("head")[0];
var oembed_link = document.createElement('link');
oembed_link['rel'] = 'alternate';
oembed_link['type'] = 'application/json+oembed';
oembed_link['href'] = 'https://oembed.knightlab.com/juxtapose/?url=' + encodeURIComponent(window.location.href);
head.appendChild(oembed_link);
</script>
</body></html>