-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (162 loc) · 7.88 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>edward - A simple presentation tool</title>
<meta name="description" content="presentation tool, slideshow, ppt, keynotes" />
<meta name="author" content="Miguel Rojas" />
<link href="style.css" rel="stylesheet" />
<script src="edjs/edward.js"></script>
<script src="edjs/edward.trans.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8155451-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="content">
<article data-transition="slide">
<h1>Welcome to <span class="big">edward</span>.js</h1>
<h2>A simple presentation tool<br />using HTML5, CSS and jQuery</h2>
<h3><<Use your arrow keys to continue >></h3>
</article>
<article data-transition="crossfade">
<h1>Slides are written entirely in HTML...</h1>
<h2>...and spiced up with CSS and JS</h2>
<ul>
<li>Your content is plain HTML, easy to edit and share</li>
<li>Presentation "themes" or "skins" are just CSS stylesheets</li>
<li>The edward.js engine manages transitions</li>
<li>Using javascript we can extend these and implement new ones</li>
</ul>
</article>
<article data-time="600" data-transition="zoom">
<h1>Slides are written entirely in HTML...</h1>
<h2>...and spiced up with CSS and JS</h2>
<ul>
<li>Your create the slideshow providing a container</li>
<li>Every child element of it became slides</li>
<li>Adding data elements you specify transitions and time delay</li>
<li>Just look at the source code of this presentation ;)</li>
</ul>
</article>
<article data-time="500" data-transition="insertcard">
<h1>Slides are written entirely in HTML...</h1>
<h2>...and spiced up with CSS and JS</h2>
<ul data-steps="true">
<li>Your can have steps into the slides too</li>
<li>Only add a data-steps="true" attribute to your lists</li>
<li>The edward.js engine manages transitions</li>
<li>And do the animations</li>
</ul>
</article>
<article data-onshow="surprise('Callback : showing slide')"
data-onhide="surprise('Callback : hiding slide')" data-transition="fade" data-time="80">
<h1>Callbacks</h1>
<h2>Events and hooks in slides</h2>
<ul>
<li>Your can have callbacks for onShow and onHide</li>
<li>Execute function calls when a slide gets in or out</li>
</ul>
</article>
<article data-transition="slide">
<h1>Design with freedom</h1>
<h2>You can add links and img's too. Even videos.</h2>
<ul>
<li>You can use <span style="color: red">styles</span> and <a href="javascript:alert('Hi!')">Javascript</a>. Richer slides!</li>
<li>Links in the content : <a href="http://www.google.com/" target="_blank">www.google.com</a>. Links between <a href="javascript:S.show(3)">slides</a> too</li>
<li>Code block :<br /><br />
<pre>
<?php
require('module.php');
echo('edward rules!');
exit();
</pre>
</li>
</ul>
</article>
<article data-transition="rotate">
<h1>Design with freedom</h1>
<h2>You can add links and img's too. Even videos.</h2>
<img src="img/gato.jpg" title="Hi, I'm Edward the cat" alt="Edward the cat" />
</article>
<article data-transition="slide">
<h1>Extensible</h1>
<h2>If you know CSS and JS, you can add your own extensions</h2>
<ul data-steps="true">
<li>You can extend transitions</li>
<li>Use CSS to implement themes and styles</li>
<li>API and callbacks(work in progress)</li>
<li><a href="javascript:S.show(1)">Go back to the beginning</a></li>
</ul>
</article>
<article data-transition="fade">
<h1 style="margin-top: 15%"><span class="big">That's all!</span></</h1>
<h2>Get it <a href="http://github.com/Leprosy/edward/">here</a></h2>
</article>
</div>
<div class="center">
<a class="prev" href="javascript:S.previous()"><< Previous</a>
<a class="next" href="javascript:S.next()">Next >></a>
</div>
<div class="other">
<p>Get the source and include it along with jQuery in your html file. Look the source of this demo to get started. With the current version of the library, you can manage more than one presentation. Clicking a presentation makes it the current "active" one, and the keyboard events will affect that slideshow.</p>
</div>
<div class="other">
<div class="left-col">
<div id="content-2">
<article data-transition="fade" data-time="500">
<h1>This is another slideshow</h1>
</article>
<article data-transition="slide">
<h2>...and it's independent of the first one</h2>
</article>
</div>
<div class="center">
<a class="prev" href="javascript:S2.previous()"><< Previous</a>
<a class="next" href="javascript:S2.next()">Next >></a>
</div>
</div>
<div class="right-col">
<div id="content-3">
<article data-transition="fade" data-time="560">
<h1>Yet another slideshow...</h1>
</article>
<article data-transition="slide">
<h2>...and it's also independent :)</h2>
</article>
</div>
<div class="center">
<a class="prev" href="javascript:S3.previous()"><< Previous</a>
<a class="next" href="javascript:S3.next()">Next >></a>
</div>
</div>
</div>
<div id="info"></div>
<script>
var S;
$(document).ready(function() {
S2 = new Edward('#content-2');
S3 = new Edward('#content-3');
S = new Edward('#content');
});
function surprise(str) {
$('#info').html(str).fadeIn(function() {
setTimeout(function() {
$('#info').fadeOut()
}, 2000);
});
}
</script>
<a href="https://github.com/Leprosy/edward">
<img style="position: fixed; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub">
</a>
</body>
</html>