-
Notifications
You must be signed in to change notification settings - Fork 0
/
blank.html
125 lines (97 loc) · 3.48 KB
/
blank.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>[your_title_here]</title>
<!--
Notes on CSS media types used:
1) projection -> slideshow mode (display one slide at-a-time; hide all others)
2) outline/screen -> outline mode (display all slides-at-once on screen)
3) print -> print (and print preview)
Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
Questions, comments?
- send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
-->
<!-- style sheet links -
note: add workaround for chrome
use screen,projection instead of projection
(without projection inline style tag gets not parsed into a styleSheet accesible via JavaScript)
-->
<link rel="stylesheet" href="css/themes/blank.css" media="screen,projection">
<link rel="stylesheet" href="css/screen.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="blank.css" media="screen,projection">
<!-- add js libs (less, jquery) -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- S6 JS -->
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.slideshow.counter.js"></script>
<script src="js/jquery.slideshow.controls.js"></script>
<script src="js/jquery.slideshow.footer.js"></script>
<script src="js/jquery.slideshow.autoplay.js"></script>
<script>
$(document).ready( function() {
Slideshow.init();
// Example 2: Start Off in Outline Mode
// Slideshow.init( { mode: 'outline' } );
// Example 3: Use Custom Transition
// Slideshow.transition = transitionScrollUp;
// Slideshow.init();
// Example 4: Start Off in Autoplay Mode with Custom Transition
// Slideshow.transition = transitionScrollUp;
// Slideshow.init( { mode: 'autoplay' } );
} );
</script>
<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
<!--[if IE]>
<script src="js/jquery.microsoft.js"></script>
<![endif]-->
</head>
<body>
<div class="layout">
<div id="header"></div>
<div id="footer">
<h1>[your_footer_here]</h1>
<h2>[your_subfooter_here]</h2>
</div>
</div>
<div class="presentation">
<!-- add slides here; example -->
<div class='slide cover'>
<h1>Your Slide Title Here</h1>
<ul>
<li>Item One Here</li>
<li>Item Two Here</li>
</ul>
</div>
<div class='slide'>
<h1>Steps Demos</h1>
<!-- mark list with class step to mark all items at once -->
<ul class='step'>
<li>Item 1.1 Here</li>
<li>Item 1.2 Here</li>
</ul>
<!-- or mark individual list items -->
<ul>
<li class='step'>Item 2.1 Here</li>
<li class='step'>Item 2.2 Here</li>
</ul>
<!-- or mark paragraphs, div blocks or whatever -->
<p class='step'>Another Step</p>
</div>
<div class='slide'>
<h1>Another Slide Title Here</h1>
<p>yada yada yada</p>
</div>
<!-- h1.fullscreen => use only centered heading with no content/body -->
<div class='slide'>
<h1 class='fullscreen'>Another Slide - Using Fullscreen Heading</h1>
</div>
<!-- h1.hidden => use heading just for table of contents (toc) -->
<div class='slide'>
<h1 class='hidden'>Another Slide - Using Hidden Heading</h1>
<p>Add Your Centered Image Here or Whatever</p>
</div>
</div> <!-- presentation -->
</body>
</html>