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

jan 21
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Tue, 21 Jan 2014 19:40:41 +0900
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/2014/2014_01_21/s6_trunk/blank.html	Tue Jan 21 19:40:41 2014 +0900
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>[your_title_here]</title>
+
+<!-- 
+   Notes on CSS media types used:
+ 
+   1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+   2) screen     -> outline mode (display all slides-at-once on screen) 
+   3) print      -> print (and print preview)
+  
+   Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
+
+   Questions, comments?
+   - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow    
+-->
+
+<!-- style sheet links -->
+<link rel="stylesheet/less" href="themes/blank/projection.css.less"  media="screen,projection">
+<link rel="stylesheet/less" href="themes/blank/screen.css.less"      media="screen">
+<link rel="stylesheet/less" href="themes/blank/print.css.less"       media="print">
+
+<link rel="stylesheet/less" href="blank.css.less"    media="screen,projection">
+
+<!-- Notes about less css support
+     - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
+     - find more info about less.js online @ http://lesscss.org
+
+    ***** NOTE:
+   less.js browser script currently won’t work if you’re using Google Chrome
+    and the path to your page starts with "file:///" due to a known Chrome issue.
+   (In the developer/js console you will see:
+     XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
+     Cross origin requests are only supported for HTTP.)
+  -->
+
+<!-- add js libs (less, jquery) -->
+<script src="js/less-1.1.4.min.js"></script>
+<script src="js/jquery-1.7.min.js"></script>
+
+<!-- S6 JS -->
+<script src="js/jquery.slideshow.js"></script>
+<script src="js/jquery.slideshow.counter.js"></script>
+<script src="js/jquery.slideshow.controls.js"></script>
+<script src="js/jquery.slideshow.footer.js"></script>
+<script src="js/jquery.slideshow.autoplay.js"></script>
+<script>
+  $(document).ready( function() {
+    Slideshow.init();
+    
+    // Example 2: Start Off in Outline Mode
+    // Slideshow.init( { mode: 'outline' } );
+    
+    // Example 3: Use Custom Transition
+    // Slideshow.transition = transitionScrollUp;
+    // Slideshow.init();
+
+    // Example 4: Start Off in Autoplay Mode with Custom Transition
+    // Slideshow.transition = transitionScrollUp;
+    // Slideshow.init( { mode: 'autoplay' } );
+  } );
+</script>
+
+<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
+<!--[if IE]>
+<script src="js/jquery.microsoft.js"></script>
+<![endif]-->
+
+</head>
+<body>
+
+<div class="layout">
+  <div id="header"></div>
+  <div id="footer">
+    <h1>[your_footer_here]</h1>
+    <h2>[your_subfooter_here]</h2>
+  </div>
+</div>
+
+<div class="presentation">
+
+  <!-- add slides here; example -->
+  
+  <div class='slide cover'>
+    <h1>Your Slide Title Here</h1>
+    <ul>
+      <li>Item One Here</li>
+      <li>Item Two Here</li>
+    </ul>
+  </div>
+
+  <div class='slide'>
+    <h1>Steps Demos</h1>
+
+    <!-- mark list with class step to mark all items at once -->
+    <ul class='step'>
+      <li>Item 1.1 Here</li>
+      <li>Item 1.2 Here</li>
+    </ul>
+
+    <!-- or mark individual list items -->
+    <ul>
+      <li class='step'>Item 2.1 Here</li>
+      <li class='step'>Item 2.2 Here</li>
+    </ul>
+
+    <!-- or mark paragraphs, div blocks or whatever -->
+    <p class='step'>Another Step</p>
+
+  </div>
+
+  <div class='slide'>
+    <h1>Another Slide Title Here</h1>
+    <p>yada yada yada</p>
+  </div>
+
+  <!-- h1.fullscreen => use only centered heading with no content/body -->
+  <div class='slide'>
+    <h1 class='fullscreen'>Another Slide - Using Fullscreen Heading</h1>
+  </div>
+
+  <!-- h1.hidden => use heading just for table of contents (toc) -->
+  <div class='slide'>
+    <h1 class='hidden'>Another Slide - Using Hidden Heading</h1>
+    <p>Add Your Centered Image Here or Whatever</p>
+   </div>
+
+</div> <!-- presentation -->
+</body>
+</html>
\ No newline at end of file