1<!-- Scatter v0.1 | (c) Peter Boughton | License: LGPLv3 | https://www.sorcerersisle.com/software/scatter -->
2<!doctype html><meta charset=utf-8 />
3<title>Polaroids Scatter Demo</title>
4
5<h1>Polaroids Scatter Demo</h1>
6<p>A collection of polaroids with captions, all options on default.
7
8<p><i>(View source to see markup, script and CSS used.)</i>
9<script src="../scatter.js"></script>
10
11
12<style>
13 body
14 {
15 font-family:sans-serif;
16 background:#CCC;
17 }
18
19 .gallery
20 {
21 width:80%;
22 height:600px;
23 display:block;
24 background:#DDD;
25 border: solid 1px black;
26 overflow:hidden;
27 }
28
29 .polaroid
30 {
31 background:#FCFCFC;
32 color:black;
33 width:181px;
34 height:219px;
35 padding:10px;
36 padding-top:16px;
37
38 box-shadow: 0 0 3px rgba(0,0,0,0.8);
39 cursor:pointer;
40 transition: 0.3s;
41 }
42
43 .polaroid.selected
44 {
45 box-shadow: 0 0 5px rgba(50,50,50,0.5);
46 cursor:default;
47 }
48
49 .polaroid img
50 {
51 display:block;
52 background:black;
53 width: 181px;
54 height:181px;
55 margin: auto;
56 }
57
58 .polaroid figcaption
59 {
60 text-align:center;
61 margin:1em;
62 }
63</style>
64
65
66<div class="gallery">
67 <figure class="polaroid"><img /><figcaption>image 1</figcaption></figure>
68 <figure class="polaroid"><img /><figcaption>image 2</figcaption></figure>
69 <figure class="polaroid"><img /><figcaption>image 3</figcaption></figure>
70 <figure class="polaroid"><img /><figcaption>image 4</figcaption></figure>
71 <figure class="polaroid"><img /><figcaption>image 5</figcaption></figure>
72 <figure class="polaroid"><img /><figcaption>image 6</figcaption></figure>
73 <figure class="polaroid"><img /><figcaption>image 7</figcaption></figure>
74 <figure class="polaroid"><img /><figcaption>image 8</figcaption></figure>
75 <figure class="polaroid"><img /><figcaption>image 9</figcaption></figure>
76 <figure class="polaroid"><img /><figcaption>image 10</figcaption></figure>
77</div>
78
79
80<script>
81 var PolaroidScatter = new Scatter('.gallery');
82 PolaroidScatter.arrange();
83</script>
