Beautiful Web-based Presentation Framework For jQuery - Tesseract

Tesseract is a web-based presentation framework for CSS and JavaScript. Your presentations can be written in HTML and presented on any computer with a web browser. Simply type in the link to the presentation, and your slides are ready in seconds. Web-based presentations solve compatibility while being insanely easy to share, and with Tesseract's default templates, there's no basic design to worry about. That. Simple. Licensed under the GPL V2.

Tesseract has 2 components. The styles, managed by a single CSS stylesheet, and the presentation toolbar, managed by a single Javascript file. The slides are written in HTML.

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.

Basic usage:

1. Load jQuery library together with the tesseract.css and 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>

 

---

This awesome jQuery plugin is developed by thesephist. For more Advanced Usages, please check the demo page or visit the official website.