1<!-- Scatter v0.1 | (c) Peter Boughton | License: LGPLv3 | https://www.sorcerersisle.com/software/scatter -->
2<!doctype html><meta charset=utf-8 />
3<title>Slides Scatter Demo</title>
4
5<h1>Slides Scatter Demo</h1>
6<p>Mimicking a spread of 24mm slide negatives, using grid mode with slight rotation.
7<p>Click on a slide to select, click background to discard, click right/left side for next/prev.
8
9<p><i>(View source to see markup, script and CSS used.)</i>
10<script src="../scatter.js"></script>
11
12
13<style>
14 body
15 {
16 font-family:sans-serif;
17 background:#EEE;
18 }
19
20 #SlidesArea
21 {
22 width: 750px;
23 height: 500px;
24 background: #DDD;
25 border: solid 1px black;
26 }
27
28 .slide
29 {
30 width:102px;
31 height:102px;
32 border-radius:6px;
33 background: rgba(255,252,246,1);
34 box-shadow: 0 0 5px rgba(0,0,0,0.1);
35 cursor: pointer;
36 transition: 0.3s;
37 }
38
39 .slide.selected
40 {
41 box-shadow: 0 0 5px rgba(48,48,48,0.5);
42 }
43
44 .slide img
45 {
46 display:block;
47 width:72px;
48 height:48px;
49 margin:27px auto;
50 padding:0;
51 background:black;
52 }
53</style>
54
55
56<div id="SlidesArea"></div>
57
58
59<script>
60 var Container = document.getElementById('SlidesArea');
61
62 for ( var i = 1 ; i <= 24 ; ++i )
63 Container.innerHTML += '<div class="slide"><img /></div>';
64
65 var Options =
66 { Mode : 'grid'
67 , InitialMode : 'grid'
68 , SelectedScale : 4
69 , MaxRotation : 3
70 , GridSpacingX : 15
71 , GridSpacingY : 15
72 , ChildEvents : {click:selectOrNavigate}
73 , ContainerEvents : {click:'discard',dblclick:'arrange'}
74 };
75
76 var SlideScatter = new Scatter(Container,Options);
77
78
79 function selectOrNavigate(event)
80 {
81 event.stopPropagation();
82
83 if ( event.currentTarget.classList.contains('selected') )
84 {
85 if ( event.offsetX > event.currentTarget.offsetWidth/2 )
86 SlideScatter.next();
87 else
88 SlideScatter.prev();
89 }
90 else
91 {
92 SlideScatter.select(event.currentTarget);
93 }
94 }
95
96</script>
