JQS5 - jQuery Simple Standards-Based Slide Show System

by Steve Pomeroy

Introduction

This is a very simple jQuery + Javascript Slide Show engine. It can turn the most basic document, such as this one, into a slideshow.

The concept is based on S5 which is a wonderful HTML slideshow engine. S5, however, requires you to add more markup than I care to worry about. JQS5 doesn't require any special markup to your document. Just add in the header and you're set!

Using JQS5

To use, simply put this in your header:

  <link rel="stylesheet" href="jqs5.css" />
  <link rel="stylesheet" href="theme/staticfree/style.css" />
  <script src="jquery.js"></script>
  <script src="jqs5.js"></script>
  <script type="text/javascript">
        $(document).ready(jqs5_init);
  </script>

Simple HTML

You then just make your slides like you would a basic HTML page. Each <h2/> becomes a slide title and all the things under it are the slide body. The <h1> is the title of the presentation and things below it are part of the footer.

Simple HTML Example

    <h1>Slideshow Title</h1>
    <p>By Steve Pomeroy</p>

    <h2>Kitten Training Tips</h2>
    <ul>
      <li>Start small</li>
      <li>Use treats</li>
      <li>Accept failure</li>
    </ul>

Kitten Training Tips

• Start small
• Use treats
• Accept failure

Download

Grab an archive of JQS5 or check it out from the JQS5 SVN repository and jQuery, paste it into your HTML and go!