-
Notifications
You must be signed in to change notification settings - Fork 16
/
example1.html
189 lines (189 loc) · 8.22 KB
/
example1.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head>
<script src="lib/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/chromatic.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="stylesheets/chromatic.css" media="screen" charset="utf-8">
<style media="screen">
body {
background: black;
}
#example1-a {
width: 80%;
height: 500px;
margin: 200px auto;
padding: 0px;
background: white;
}
#example1-a div {
margin: 0;
}
#example1-b {
width: 60%;
height: 500px;
margin: 200px auto;
background: yellow;
}
#example1-c {
width: 60%;
height: 500px;
margin: 200px auto;
padding: 10px 0 0 10px;
background: red;
}
#example1-c div {
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div id="example1-a"></div>
<div id="example1-b"></div>
<div id="example1-c"></div>
<script charset="utf-8">
$(function(){
var photos = [
{
"small": "http://img3.chromatic.io/fe766076-f472-e5a5-f173-bded6975ce8a/small.jpg",
"big": "http://img3.chromatic.io/fe766076-f472-e5a5-f173-bded6975ce8a/big.jpg",
"blur": "http://img3.chromatic.io/fe766076-f472-e5a5-f173-bded6975ce8a/background.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/ebe0117b-9351-c1e4-2e51-51c88f4132fb/small.jpg",
"big": "http://img3.chromatic.io/ebe0117b-9351-c1e4-2e51-51c88f4132fb/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/0434dc64-0226-6250-30eb-42b282eefb40/small.jpg",
"big": "http://img3.chromatic.io/0434dc64-0226-6250-30eb-42b282eefb40/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/a54f0a9c-1dfc-c689-045d-e54f7e645872/small.jpg",
"big": "http://img3.chromatic.io/a54f0a9c-1dfc-c689-045d-e54f7e645872/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/d8fb8ca6-3b46-d763-9dbf-fd8388402d1d/small.jpg",
"big": "http://img3.chromatic.io/d8fb8ca6-3b46-d763-9dbf-fd8388402d1d/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/0161d247-b64e-16f5-b4f9-27c33ad6451c/small.jpg",
"big": "http://img3.chromatic.io/0161d247-b64e-16f5-b4f9-27c33ad6451c/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/cc10fccc-7cf9-04c3-1794-d8ba489d1119/small.jpg",
"big": "http://img3.chromatic.io/cc10fccc-7cf9-04c3-1794-d8ba489d1119/big.jpg",
"aspect_ratio": 1.5049157303370786
},
{
"small": "http://img3.chromatic.io/3c1618ba-bddb-a51e-4fed-86c549eeb539/small.jpg",
"big": "http://img3.chromatic.io/3c1618ba-bddb-a51e-4fed-86c549eeb539/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/1192ce85-5675-46f0-ddfc-6c49b5ccbb44/small.jpg",
"big": "http://img3.chromatic.io/1192ce85-5675-46f0-ddfc-6c49b5ccbb44/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/cb744883-f13a-bf5b-ab9d-5edeafadccc7/small.jpg",
"big": "http://img3.chromatic.io/cb744883-f13a-bf5b-ab9d-5edeafadccc7/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/fc5fdcc8-64f1-de56-74bc-e0518edeae5f/small.jpg",
"big": "http://img3.chromatic.io/fc5fdcc8-64f1-de56-74bc-e0518edeae5f/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/f2044ecb-671b-1cd3-10ca-ff84ff42936e/small.jpg",
"big": "http://img3.chromatic.io/f2044ecb-671b-1cd3-10ca-ff84ff42936e/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/618e41ea-4fcc-90d4-4295-f8ee4d87006e/small.jpg",
"big": "http://img3.chromatic.io/618e41ea-4fcc-90d4-4295-f8ee4d87006e/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/20b47a31-1ded-ec7d-a08d-7cd605189536/small.jpg",
"big": "http://img3.chromatic.io/20b47a31-1ded-ec7d-a08d-7cd605189536/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/f30bed2b-1888-6f88-20c4-d3870a2a9d62/small.jpg",
"big": "http://img3.chromatic.io/f30bed2b-1888-6f88-20c4-d3870a2a9d62/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/b25db2e6-c7f8-a5a2-a3da-ab0601458676/small.jpg",
"big": "http://img3.chromatic.io/b25db2e6-c7f8-a5a2-a3da-ab0601458676/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/7a9f09ad-f19b-95e7-9538-bc049810ec5a/small.jpg",
"big": "http://img3.chromatic.io/7a9f09ad-f19b-95e7-9538-bc049810ec5a/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/0a6526f7-477c-44db-1929-7dd28de8c629/small.jpg",
"big": "http://img3.chromatic.io/0a6526f7-477c-44db-1929-7dd28de8c629/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/836fc934-b423-a2b2-26e9-66f6c0aea0a5/small.jpg",
"big": "http://img3.chromatic.io/836fc934-b423-a2b2-26e9-66f6c0aea0a5/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/d7088a6f-4691-a502-4e37-43177ed6e293/small.jpg",
"big": "http://img3.chromatic.io/d7088a6f-4691-a502-4e37-43177ed6e293/big.jpg",
"aspect_ratio": 0.664813343923749
},
{
"small": "http://img3.chromatic.io/92f6bfdf-8308-bd67-ffbc-37ab19a7e345/small.jpg",
"big": "http://img3.chromatic.io/92f6bfdf-8308-bd67-ffbc-37ab19a7e345/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/ca43eb5a-0cbf-2705-7d01-0432e55b0c6c/small.jpg",
"big": "http://img3.chromatic.io/ca43eb5a-0cbf-2705-7d01-0432e55b0c6c/big.jpg",
"aspect_ratio": 1.5040797824116048
},
{
"small": "http://img3.chromatic.io/73511c34-65b8-250e-4460-2f04dbe7c8a8/small.jpg",
"big": "http://img3.chromatic.io/73511c34-65b8-250e-4460-2f04dbe7c8a8/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/c3c03142-6a4e-e127-3709-62a981a1d1c4/small.jpg",
"big": "http://img3.chromatic.io/c3c03142-6a4e-e127-3709-62a981a1d1c4/big.jpg",
"aspect_ratio": 0.6645454545454546
},
{
"small": "http://img3.chromatic.io/22e58b3e-0150-593c-4c20-f069b5e04fff/small.jpg",
"big": "http://img3.chromatic.io/22e58b3e-0150-593c-4c20-f069b5e04fff/big.jpg",
"aspect_ratio": 1.5058179329226558
},
{
"small": "http://img3.chromatic.io/2fbd62df-4081-6102-8126-3e52736951f1/small.jpg",
"big": "http://img3.chromatic.io/2fbd62df-4081-6102-8126-3e52736951f1/big.jpg",
"aspect_ratio": 1.5047879616963065
},
{
"small": "http://img3.chromatic.io/6c969b53-95c0-d2ee-5e1b-d8a93f6f7fb6/small.jpg",
"big": "http://img3.chromatic.io/6c969b53-95c0-d2ee-5e1b-d8a93f6f7fb6/big.jpg",
"aspect_ratio": 1.5047879616963065
}
];
$("#example1-a").chromatic(photos);
$("#example1-b").chromatic(photos);
$("#example1-c").chromatic(photos);
})
</script>
</body>
</html>