|File Size:||83.9 KB|
|Official Website:||Go to website|
The toolbar controls presentation navigation, and supports...
- Going invisible and out of the way when not needed
- Customizeable auto-play for a given time duration per slide
- Mini-toolbar mode, with just back/forward arrows (handle on the left edge)
- Full-screen support, with presentation filling the entire display, leaving no black bars or letterboxing.
1. Load jQuery library together with the
tesseract.js into your document.
<link rel="stylesheet" href="tesseract.css"> ... <script src="/path/to/jquery.min.js"></script> <script src="tesseract.js"></script>
2. While the default templates are easy to work with and cleanly designed, the possibilities of additional styling and customizations are endless and simple. Have a new nagivation feature to add? New fonts? Different backgrounds? Want to hide a slide quickly or delete a button from the toolbar? Your solutions are just a line of HTML markup away. Default styles include styles for slides with titles and without, dividing the slide horizontally into halves, thirds, and fourths, headers and sub headers, code and video embeds (and, obviously, any other valid HTML embed works with some tweaking), links, images, backgrounds, enumerated, roman, and bulleted lists among others.
<div id="presets-header"> auto-play=off; </div> <div id="presentation-container"> <div id="tesseract-toolbar"> <img id="sh-arrow" src="assets/sh-arrow.png"/> <img id="fs" src="assets/fullscreen.png"/> <img id="ps" src="assets/partscreen.png"/> <div id="ss-setter"> <img id="ssl" src="assets/ssl.png"/> <div id="ssn">15</div> <img id="ssr" src="assets/ssr.png"/> </div> <img id="play" src="assets/play.png"/> <img id="pause" src="assets/pause.png"/> <img id="sl" src="assets/sl.png"/> <img id="sr" src="assets/sr.png"/> <img id="picker" class="on" src="assets/picker.png"/> </div> <div id="presentation"> <div class="slide"> <div class="bt"> <h1 class="tC">Title</h1> <h2 class="tC">Subtitle</h2> </div> </div> </div> </div>