forked from michibo/fabulation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
93 lines (68 loc) · 3.59 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="github.com/michibo/fabulation">
<meta name="author" content="fabulation">
<title>Fabulation</title>
<link rel="stylesheet" href="css/fabulation.css">
<script src="js/jquery.min.js"></script>
<script src="js/howler.min.js"></script>
<script src="js/fabulation.js"></script>
</head>
<body>
<div class="bg">
</div>
<div class="content">
<div class="disp">
</div>
<div class="center-scene">
<div id="n8" style="display: none;">
<p>Fabulation is a simple tool to narrate a story in a non-linear fashion.</p>
<p><span id="ln8_0" class="fl">continue</span></p>
<p><span id="ln8_1" class="fl">stop audio</span></p>
</div>
<div id="n3" style="display: none;">
<p>And pictures!</p>
<p><span id="ln3_0" class="fl">Full screen pictures are also possible</span></p>
<p><span id="ln3_1" class="fl">go somewhere</span></p>
<p><span id="ln3_2" class="fl">Back to the beginning</span></p>
</div>
<div id="n7" style="display: none;">
<p>Audio stopped!</p>
<p><span id="bn7_0" class="fl">Go Back!</span></p>
</div>
<div id="n2" style="display: none;">
<p>You can include sounds...</p>
<p>Fabulation can be used to generate 'Audio-Slideshows'.</p>
<p><span id="ln2_0" class="fl">continue</span></p>
<p><span id="ln2_1" class="fl">go somewhere</span></p>
</div>
<div id="n0" style="display: none;">
<p><span id="ln0_0" class="fl">go somewhere</span></p>
<p><span id="ln0_1" class="fl">Back to the beginning</span></p>
</div>
<div id="n1" style="display: none;">
<p>Links can always point <span id="bn1_0" class="fl">back to bring you back where you came from!</span></p>
</div>
<div id="n5" style="display: none;">
<p>There can be overlay of the fullsize pictures. You can click or press a key to continue.</p>
</div>
<div id="n6" style="display: none;">
</div>
<div id="n4" style="display: none;">
<p>You can jump from scene to scene using links!</p>
<p><span id="ln4_0" class="fl">continue</span></p>
<p><span id="ln4_1" class="fl">go somewhere</span></p>
</div>
</div>
</div>
<script>
var meta = {"n8": {"links": {"ln8_1": "n7", "ln8_0": "n4"}}, "n3": {"pic": "https://c3.staticflickr.com/3/2580/4080412658_186be3d7c1_b.jpg", "links": {"ln3_1": "n1", "ln3_2": "n8", "ln3_0": "n6"}}, "n7": {"stopaudio": true, "backlinks": {"bn7_0": 1}}, "n0": {"links": {"ln0_0": "n1", "ln0_1": "n8"}, "fullpic": "https://c6.staticflickr.com/8/7145/6537571341_42047c7cc0_b.jpg"}, "n2": {"audio": "https://upload.wikimedia.org/wikipedia/commons/4/47/Demo_delay.ogg", "links": {"ln2_1": "n1", "ln2_0": "n3"}}, "n1": {"backlinks": {"bn1_0": 1}}, "n5": {"nxt": "n0", "fullpic": "https://c6.staticflickr.com/8/7145/6537571341_42047c7cc0_b.jpg"}, "n6": {"nxt": "n5", "fullpic": "https://c3.staticflickr.com/3/2580/4080412658_186be3d7c1_b.jpg"}, "n4": {"links": {"ln4_1": "n1", "ln4_0": "n2"}}};
$(function() {
start_fabulation(meta)(meta["n8"])
})
</script>
</body>
</html>