annotate minimalistic.html @ 16:3e98b8d4c928

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