Mercurial > hg > Members > kaito > slides
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