annotate 14/slides/template.html @ 58:626c52694901

add Outline & purpose
author Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
date Fri, 21 Mar 2014 10:37:46 +0900
parents 59c5bf04e8c4
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
1 <!DOCTYPE html>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
2 <html>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
3 <head>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
5 <title>25th,March,2014</title>
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
6
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
7 <!--
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
8 Notes on CSS media types used:
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
9
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
10 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
11 2) screen -> outline mode (display all slides-at-once on screen)
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
12 3) print -> print (and print preview)
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
13
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
14 Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
15
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
16 Questions, comments?
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
17 - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
18 -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
19
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
20 <!-- styles -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
21 <style media="screen,projection">
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
22
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
23 html,
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
24 body,
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
25 .presentation { margin: 0; padding: 0; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
26
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
27 .slide { display: none;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
28 position: absolute;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
29 top: 0; left: 0;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
30 margin: 0;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
31 border: none;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
32 padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
33 -moz-box-sizing: border-box;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
34 -webkit-box-sizing: border-box;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
35 box-sizing: border-box;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
36 width: 100%; height: 100%; /* css note: lets use border-box; no need to add padding+border to get to 100% */
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
37 overflow-x: hidden; overflow-y: auto;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
38 z-index: 2;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
39 }
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
40
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
41 .slide.current { display: block; } /* only display current slide in projection mode */
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
42
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
43 .slide .stepcurrent { color: black; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
44 .slide .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
45
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
46 .slide {
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
47 /*
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
48 background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
49 background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
50 */
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
51 }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
52 </style>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
53
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
54 <style media="screen">
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
55 .slide { border-top: 1px solid #888; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
56 .slide:first-child { border: none; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
57 </style>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
58
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
59 <style media="print">
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
60 .slide { page-break-inside: avoid; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
61 .slide h1 { page-break-after: avoid; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
62 .slide ul { page-break-inside: avoid; }
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
63 </style>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
64
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
65
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
66 <!-- add js lib (jquery) -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
67 <script src="js/jquery-1.7.min.js"></script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
68
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
69 <!-- S6 JS -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
70 <script src="js/jquery.slideshow.js"></script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
71 <script src="js/jquery.slideshow.counter.js"></script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
72 <script src="js/jquery.slideshow.controls.js"></script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
73 <script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
74 $(document).ready( function() {
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
75 Slideshow.init();
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
76
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
77 // Example 2: Start Off in Outline Mode
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
78 // Slideshow.init( { mode: 'outline' } );
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
79
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
80 // Example 3: Use Custom Transition
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
81 // Slideshow.transition = transitionScrollUp;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
82 // Slideshow.init();
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
83
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
84 // Example 4: Start Off in Autoplay Mode with Custom Transition
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
85 // Slideshow.transition = transitionScrollUp;
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
86 // Slideshow.init( { mode: 'autoplay' } );
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
87 } );
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
88 </script>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
89
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
90 </head>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
91 <body>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
92
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
93 <div class="presentation">
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
94
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
95 <!-- add slides here; example -->
58
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
96 <div id="header">
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
97 <h1>[your_header_here]</h1>
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
98 </div>
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
99
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
100 <div class='cover'>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
101 <h1>Your Slide Title Here</h1>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
102 <ul>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
103 <li>Item One Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
104 <li>Item Two Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
105 </ul>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
106 </div>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
107
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
108 <div>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
109 <h1>Steps Demos</h1>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
110
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
111 <!-- mark list with class step to mark all items at once -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
112 <ul class='step'>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
113 <li>Item 1.1 Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
114 <li>Item 1.2 Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
115 </ul>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
116
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
117 <!-- or mark individual list items -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
118 <ul>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
119 <li class='step'>Item 2.1 Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
120 <li class='step'>Item 2.2 Here</li>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
121 </ul>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
122
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
123 <!-- or mark paragraphs, div blocks or whatever -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
124 <p class='step'>Another Step</p>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
125
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
126 </div>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
127
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
128 <div>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
129 <h1>Another Slide Title Here</h1>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
130 <p>yada yada yada</p>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
131 </div>
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
132
58
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
133 <div id="footer">
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
134 <h1>[your_footer_here]</h1>
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
135 <h2>[your_subfooter_here]</h2>
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
136 </div>
626c52694901 add Outline & purpose
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 57
diff changeset
137
56
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
138 </div> <!-- presentation -->
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents:
diff changeset
139 </body>
57
59c5bf04e8c4 change background color & add March25.html
Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
parents: 56
diff changeset
140 </html>