forked from robflaherty/html-slideshow
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathslideshow.html
More file actions
104 lines (104 loc) · 3.85 KB
/
slideshow.html
File metadata and controls
104 lines (104 loc) · 3.85 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/styles.css" />
<link rel="stylesheet" href="content/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">
<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</h2>
</hgroup>
<p>When a new slide is loaded, a "newSlide" event is fired, containing the number of the slide.</p>
<p>There's also an event triggered when a new "action" is revealed. (Take look at your console.)</p>
<p></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>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 stylesheet.</p>
<p>The slide script has one option, the option to hide the menu bar at the top:</p>
<pre>
sliderInit({hideMenu: 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/ravelrumba">@ravelrumba</a> / <a href="mailto:rob@ravelrumba.com">rob@ravelrumba.com</a></p>
</section>
</div>
<!-- /deck -->
<script src="resources/jquery-1.4.2.min.js"></script>
<script src="resources/htmlSlides.js"></script>
<script>
//This is just to demo the custom events
$('html').bind('newSlide', function(e,id) { console.log('New slide event, slide number ' + id)});
$('html').bind('newAction', function(e,id) { console.log('New action event, action number ' + id)});
</script>
</body>
</html>