/
index.html
125 lines (124 loc) · 7.23 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Progressive Image Grid: pig.js</title>
<style type="text/css">
body {
padding: 2rem;
}
/* Tests that the container works even if it has a relative parent
* lower than the page.
*/
.pig-wrapper {
position: relative;
margin-top: 400px;
}
</style>
</head>
<body>
<h1>Scroll to see some images...</h1>
<div class="pig-wrapper">
<div id="pig"></div>
</div>
<script type="text/javascript" src="../src/pig.js"></script>
<script type="text/javascript">
var imageData = [
{"filename":"2015-01-01.14.24.49.jpg","aspectRatio":1.7777},
{"filename":"2015-01-01.19.47.28.jpg","aspectRatio":1.7777},
{"filename":"2015-01-01.21.11.37.jpg","aspectRatio":1.7777},
{"filename":"2015-01-02.20.03.26.jpg","aspectRatio":1.7777},
{"filename":"2015-01-02.23.19.25.jpg","aspectRatio":0.5625},
{"filename":"2015-01-03.20.12.35.jpg","aspectRatio":0.5625},
{"filename":"2015-01-03.21.18.58.jpg","aspectRatio":0.5625},
{"filename":"2015-01-04.12.39.47.jpg","aspectRatio":1.7777},
{"filename":"2015-01-04.18.50.00.jpg","aspectRatio":0.5625},
{"filename":"2015-01-04.19.32.52.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.12.16.10.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.14.40.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.17.56.32.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.19.06.48.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.21.08.16.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.21.36.36.jpg","aspectRatio":1.7777},
{"filename":"2015-01-05.23.29.58.jpg","aspectRatio":1.7777},
{"filename":"2015-01-06.14.00.38.jpg","aspectRatio":1.7777},
{"filename":"2015-01-06.16.14.09.jpg","aspectRatio":1.7777},
{"filename":"2015-01-06.20.02.47.jpg","aspectRatio":1.7777},
{"filename":"2015-01-07.12.26.32.jpg","aspectRatio":1.7777},
{"filename":"2015-01-07.16.12.08.jpg","aspectRatio":1.7777},
{"filename":"2015-01-07.20.54.23.jpg","aspectRatio":1.7777},
{"filename":"2015-01-07.22.41.42.jpg","aspectRatio":1.7777},
{"filename":"2015-01-08.14.01.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-08.15.22.05.jpg","aspectRatio":1.7777},
{"filename":"2015-01-08.18.40.19.jpg","aspectRatio":0.5625},
{"filename":"2015-01-08.18.48.42.jpg","aspectRatio":1.7777},
{"filename":"2015-01-08.19.08.11.jpg","aspectRatio":1.7777},
{"filename":"2015-01-08.20.01.03.jpg","aspectRatio":0.5625},
{"filename":"2015-01-09.01.19.48.jpg","aspectRatio":1.7777},
{"filename":"2015-01-09.14.13.40.jpg","aspectRatio":1.7777},
{"filename":"2015-01-09.17.43.45.jpg","aspectRatio":1.7777},
{"filename":"2015-01-09.21.28.30.jpg","aspectRatio":1.7777},
{"filename":"2015-01-09.21.38.51.jpg","aspectRatio":0.5625},
{"filename":"2015-01-10.10.40.38.jpg","aspectRatio":1.7777},
{"filename":"2015-01-10.17.53.06.jpg","aspectRatio":1.7777},
{"filename":"2015-01-10.18.40.13.jpg","aspectRatio":1.7777},
{"filename":"2015-01-10.19.40.47.jpg","aspectRatio":0.5625},
{"filename":"2015-01-10.22.02.47.jpg","aspectRatio":1.7777},
{"filename":"2015-01-11.13.53.35.jpg","aspectRatio":1.7777},
{"filename":"2015-01-11.19.19.52.jpg","aspectRatio":1.7777},
{"filename":"2015-01-12.11.10.55.jpg","aspectRatio":1.7777},
{"filename":"2015-01-12.15.33.35.jpg","aspectRatio":1.7777},
{"filename":"2015-01-12.20.15.13.jpg","aspectRatio":1.7777},
{"filename":"2015-01-13.14.48.14.jpg","aspectRatio":1.7777},
{"filename":"2015-01-13.19.21.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-13.23.58.47.jpg","aspectRatio":1.7777},
{"filename":"2015-01-14.14.32.09.jpg","aspectRatio":1.7777},
{"filename":"2015-01-15.02.27.26.jpg","aspectRatio":1.7777},
{"filename":"2015-01-15.13.31.56.jpg","aspectRatio":1.7777},
{"filename":"2015-01-15.13.32.06.jpg","aspectRatio":1.7777},
{"filename":"2015-01-15.19.05.43.jpg","aspectRatio":0.5625},
{"filename":"2015-01-15.20.07.26.jpg","aspectRatio":1.7777},
{"filename":"2015-01-15.22.49.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-16.11.09.04.jpg","aspectRatio":1.7777},
{"filename":"2015-01-16.16.42.51.jpg","aspectRatio":0.5625},
{"filename":"2015-01-17.12.01.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-17.17.24.40.jpg","aspectRatio":1.7777},
{"filename":"2015-01-17.17.24.47.jpg","aspectRatio":1.7777},
{"filename":"2015-01-17.18.16.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-17.19.10.16.jpg","aspectRatio":1.7777},
{"filename":"2015-01-17.23.35.01.jpg","aspectRatio":0.5625},
{"filename":"2015-01-18.16.21.40.jpg","aspectRatio":1.7777},
{"filename":"2015-01-18.20.05.59.jpg","aspectRatio":1.7777},
{"filename":"2015-01-18.21.11.05.jpg","aspectRatio":1.7777},
{"filename":"2015-01-18.21.37.41.jpg","aspectRatio":1.7777},
{"filename":"2015-01-19.14.08.28.jpg","aspectRatio":1.7777},
{"filename":"2015-01-19.19.26.32.jpg","aspectRatio":1.7777},
{"filename":"2015-01-19.22.02.58.jpg","aspectRatio":1.7777},
{"filename":"2015-01-19.22.05.24.jpg","aspectRatio":0.5625},
{"filename":"2015-01-19.23.36.00.jpg","aspectRatio":1.7777},
{"filename":"2015-01-20.18.36.19.jpg","aspectRatio":1.7777},
{"filename":"2015-01-20.20.49.28.jpg","aspectRatio":1.7777},
{"filename":"2015-01-20.21.17.10.jpg","aspectRatio":1.7777},
{"filename":"2015-01-20.23.47.43.jpg","aspectRatio":1.7777},
{"filename":"2015-01-21.12.35.30.jpg","aspectRatio":1.7777},
{"filename":"2015-01-21.17.18.20.jpg","aspectRatio":1.7777},
{"filename":"2015-01-21.18.52.42.jpg","aspectRatio":1.7777},
{"filename":"2015-01-21.22.38.40.jpg","aspectRatio":1.7777},
{"filename":"2015-01-22.10.03.35.jpg","aspectRatio":1.7777},
{"filename":"2015-01-22.13.07.34.jpg","aspectRatio":1.7777},
{"filename":"2015-01-22.16.53.32.jpg","aspectRatio":1.7777},
{"filename":"2015-01-22.21.15.10.jpg","aspectRatio":1.7777},
{"filename":"2015-01-22.22.12.55.jpg","aspectRatio":1.7777},
{"filename":"2015-01-23.12.52.59.jpg","aspectRatio":1.7777},
{"filename":"2015-01-23.16.05.41.jpg","aspectRatio":1.7777},
{"filename":"2015-01-23.18.28.56.jpg","aspectRatio":1.7777},
];
var pig = new Pig(imageData, {
urlForSize: function(filename, size) {
return 'https://food.schlosser.io/img/food/' + size + '/' + filename;
}
}).enable();
</script>
</body>
</html>