Mercurial > hg > Members > kaito > slides

comparison 2014/2014_01_21/s6_trunk/blank.html @ 1:bcf1ede39faa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
jan 21
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Tue, 21 Jan 2014 19:40:41 +0900
parents
children
comparison
equal deleted inserted replaced
0:845ff8ff4fc9 1:bcf1ede39faa
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset='utf-8'>
5 <title>[your_title_here]</title>
6
7 <!--
8 Notes on CSS media types used:
9
10 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
11 2) screen -> outline mode (display all slides-at-once on screen)
12 3) print -> print (and print preview)
13
14 Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
15
16 Questions, comments?
17 - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
18 -->
19
20 <!-- style sheet links -->
21 <link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
22 <link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
23 <link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">
24
25 <link rel="stylesheet/less" href="blank.css.less" media="screen,projection">
26
27 <!-- Notes about less css support
28 - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
29 - find more info about less.js online @ http://lesscss.org
30
31 ***** NOTE:
32 less.js browser script currently won’t work if you’re using Google Chrome
33 and the path to your page starts with "file:///" due to a known Chrome issue.
34 (In the developer/js console you will see:
35 XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
36 Cross origin requests are only supported for HTTP.)
37 -->
38
39 <!-- add js libs (less, jquery) -->
40 <script src="js/less-1.1.4.min.js"></script>
41 <script src="js/jquery-1.7.min.js"></script>
42
43 <!-- S6 JS -->
44 <script src="js/jquery.slideshow.js"></script>
45 <script src="js/jquery.slideshow.counter.js"></script>
46 <script src="js/jquery.slideshow.controls.js"></script>
47 <script src="js/jquery.slideshow.footer.js"></script>
48 <script src="js/jquery.slideshow.autoplay.js"></script>
49 <script>
50 $(document).ready( function() {
51 Slideshow.init();
52
53 // Example 2: Start Off in Outline Mode
54 // Slideshow.init( { mode: 'outline' } );
55
56 // Example 3: Use Custom Transition
57 // Slideshow.transition = transitionScrollUp;
58 // Slideshow.init();
59
60 // Example 4: Start Off in Autoplay Mode with Custom Transition
61 // Slideshow.transition = transitionScrollUp;
62 // Slideshow.init( { mode: 'autoplay' } );
63 } );
64 </script>
65
66 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
67 <!--[if IE]>
68 <script src="js/jquery.microsoft.js"></script>
69 <![endif]-->
70
71 </head>
72 <body>
73
74 <div class="layout">
75 <div id="header"></div>
76 <div id="footer">
77 <h1>[your_footer_here]</h1>
78 <h2>[your_subfooter_here]</h2>
79 </div>
80 </div>
81
82 <div class="presentation">
83
84 <!-- add slides here; example -->
85
86 <div class='slide cover'>
87 <h1>Your Slide Title Here</h1>
88 <ul>
89 <li>Item One Here</li>
90 <li>Item Two Here</li>
91 </ul>
92 </div>
93
94 <div class='slide'>
95 <h1>Steps Demos</h1>
96
97 <!-- mark list with class step to mark all items at once -->
98 <ul class='step'>
99 <li>Item 1.1 Here</li>
100 <li>Item 1.2 Here</li>
101 </ul>
102
103 <!-- or mark individual list items -->
104 <ul>
105 <li class='step'>Item 2.1 Here</li>
106 <li class='step'>Item 2.2 Here</li>
107 </ul>
108
109 <!-- or mark paragraphs, div blocks or whatever -->
110 <p class='step'>Another Step</p>
111
112 </div>
113
114 <div class='slide'>
115 <h1>Another Slide Title Here</h1>
116 <p>yada yada yada</p>
117 </div>
118
119 <!-- h1.fullscreen => use only centered heading with no content/body -->
120 <div class='slide'>
121 <h1 class='fullscreen'>Another Slide - Using Fullscreen Heading</h1>
122 </div>
123
124 <!-- h1.hidden => use heading just for table of contents (toc) -->
125 <div class='slide'>
126 <h1 class='hidden'>Another Slide - Using Hidden Heading</h1>
127 <p>Add Your Centered Image Here or Whatever</p>
128 </div>
129
130 </div> <!-- presentation -->
131 </body>
132 </html>