annotate template.html @ 10:846502832f71

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