forked from robflaherty/html-slideshow
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (129 loc) · 4.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="lib/html5shim.js"></script>
<![endif]-->
<!-- These are some core styles the slideshow app requires -->
<link rel="stylesheet" href="lib/styles.css" />
<!-- These are the styles you'll add to make the slides look great -->
<link rel="stylesheet" href="css/styles.css" />
<title>Example Slideshow</title>
</head>
<body>
<header>
<h1>Example Slide Show</h1>
<nav>
<ul>
<li><button id="prev-btn" title="Previous slide">Previous Slide</button></li>
<li><span id="slide-number"></span>/<span id="slide-total"></span></li>
<li><button id="next-btn" title="Next Slide">Next Slide</button></li>
</ul>
</nav>
</header>
<div id="deck">
<!-- Begin slides -->
<section>
<hgroup>
<h1>Hello, interwebs explorer.</h1>
<h2>How to use this thing</h2>
</hgroup>
<p>Press the right arrow, down arrow, or spacebar to advance; press the left arrow or up arrow to move backward.</p>
<p>You can also click the left and right arrows in the control bar at the top.</p>
</section>
<section>
<hgroup>
<h1>Intraslide animation</h1>
<h2>I'm calling these "actions"</h2>
</hgroup>
<p>You can hide/reveal content within the slides by giving something a class of "action". Actions are revealed in the order in which they occur in the HTML. Advancing to the next slide will first reveal actions on the page if they exist.</p>
<pre>
<p class="action">This will be hidden when the slide loads</p>
</pre>
<ul>
<li class="action">Bullet point</li>
<li class="action">Another bullet point</li>
<li class="action">Yet another bullet point</li>
<li class="action">You get the idea</li>
</ul>
</section>
<section>
<hgroup>
<h1>Custom events</h1>
<h2>These may or may not be useful for you</h2>
</hgroup>
<p>When a new slide is loaded, a "newSlide" event is fired. (Take a look at your console.)</p>
<p>There's also an event triggered when a new "action" is revealed.</p>
<pre>
//Example usage
$('html').bind('newSlide', function(e,id) { console.log(id) });
</pre>
</section>
<section>
<hgroup>
<h1>Building slides</h1>
<h2>It's easy</h2>
</hgroup>
<p>Each slide goes within a <code>section</code> element, like this:</p>
<pre>
<section>
<hgroup>
<h1>Your heading</h1>
<h2>Your subheading</h2>
</hgroup>
<p>All your slide content...</p>
</section>
</pre>
<p>You don't have to worry about numbering the slides. The script will count the number of <code>section</code> elements and give each one a numbered ID on page load.</p>
</section>
<section>
<hgroup>
<h1>Plays well with images</h1>
</hgroup>
<img src="images/best-stegosaurus.png" alt="The Best Dinosaur" />
</section>
<section>
<hgroup>
<h1>Other details</h1>
<h2>Small stuff</h2>
</hgroup>
<p>The hash updates with each slide.</p>
<p>The slideshow itself has 3 dependencies: jQuery, htmlSlides.js, and a small stylesheet.</p>
<p>The slide script has one option, the option to hide the toolbar at the top:</p>
<pre>
htmlSlides.init({ toolbar: true });
</pre>
</section>
<section>
<hgroup>
<h1>That's all</h1>
</hgroup>
<p>Get it at <a href="http://github.com/robflaherty/html-slideshow">github</a>.</p>
<p>- Rob Flaherty / <a href="http://twitter.com/robflaherty">@robflaherty</a> / <a href="mailto:rob@ravelrumba.com">rob@ravelrumba.com</a></p>
</section>
<!-- /End slides -->
</div>
<!-- /deck -->
<script src="lib/jquery-1.6.4.min.js"></script>
<script src="lib/jquery.jswipe-0.1.2.js"></script>
<script src="lib/htmlSlides.js"></script>
<script>
//Do our business when the DOM is ready for us
$(function() {
//You can trigger Javascript based on the slide number like this:
$('html').bind('newSlide', function(e, id) {
switch(id) {
case 2:
console.log('This is the second slide.');;
break;
case 3:
console.log('Hello, third slide.');
break;
}
});
htmlSlides.init({});
});
</script>
</body>
</html>