Mercurial > hg > Members > kaito > slides

comparison 2014/2014_01_14/s6_trunk/minimalistic.html @ 0:845ff8ff4fc9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
1st
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Tue, 14 Jan 2014 01:31:42 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:845ff8ff4fc9
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;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 <!-- styles -->
21 <style media="screen,projection">
22
23 html,
24 body,
25 .presentation { margin: 0; padding: 0; }
26
27 .slide { display: none;
28 position: absolute;
29 top: 0; left: 0;
30 margin: 0;
31 border: none;
32 padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */
33 -moz-box-sizing: border-box;
34 -webkit-box-sizing: border-box;
35 box-sizing: border-box;
36 width: 100%; height: 100%; /* css note: lets use border-box; no need to add padding+border to get to 100% */
37 overflow-x: hidden; overflow-y: auto;
38 z-index: 2;
39 }
40
41 .slide.current { display: block; } /* only display current slide in projection mode */
42
43 .slide .stepcurrent { color: black; }
44 .slide .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
45
46 .slide {
47 background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
48 background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
49 }
50 </style>
51
52 <style media="screen">
53 .slide { border-top: 1px solid #888; }
54 .slide:first-child { border: none; }
55 </style>
56
57 <style media="print">
58 .slide { page-break-inside: avoid; }
59 .slide h1 { page-break-after: avoid; }
60 .slide ul { page-break-inside: avoid; }
61 </style>
62
63
64 <!-- add js lib (jquery) -->
65 <script src="js/jquery-1.7.min.js"></script>
66
67 <!-- S6 JS -->
68 <script src="js/jquery.slideshow.js"></script>
69 <script src="js/jquery.slideshow.counter.js"></script>
70 <script src="js/jquery.slideshow.controls.js"></script>
71 <script>
72 $(document).ready( function() {
73 Slideshow.init();
74
75 // Example 2: Start Off in Outline Mode
76 // Slideshow.init( { mode: 'outline' } );
77
78 // Example 3: Use Custom Transition
79 // Slideshow.transition = transitionScrollUp;
80 // Slideshow.init();
81
82 // Example 4: Start Off in Autoplay Mode with Custom Transition
83 // Slideshow.transition = transitionScrollUp;
84 // Slideshow.init( { mode: 'autoplay' } );
85 } );
86 </script>
87
88 </head>
89 <body>
90
91 <div class="presentation">
92
93 <!-- add slides here; example -->
94
95 <div class='cover'>
96 <h1>Your Slide Title Here</h1>
97 <ul>
98 <li>Item One Here</li>
99 <li>Item Two Here</li>
100 </ul>
101 </div>
102
103 <div>
104 <h1>Steps Demos</h1>
105
106 <!-- mark list with class step to mark all items at once -->
107 <ul class='step'>
108 <li>Item 1.1 Here</li>
109 <li>Item 1.2 Here</li>
110 </ul>
111
112 <!-- or mark individual list items -->
113 <ul>
114 <li class='step'>Item 2.1 Here</li>
115 <li class='step'>Item 2.2 Here</li>
116 </ul>
117
118 <!-- or mark paragraphs, div blocks or whatever -->
119 <p class='step'>Another Step</p>
120
121 </div>
122
123 <div>
124 <h1>Another Slide Title Here</h1>
125 <p>yada yada yada</p>
126 </div>
127
128 </div> <!-- presentation -->
129 </body>
130 </html>