Sorcerer's IsleCode Scatter / files

 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>