JSlide, JavaScript slideshows

A few days ago I came across S5, a nice script for doing slideshows in the browser. However, I didn't like a few things in it, and one of them is that one presentation has to take up all the space on the screen. One nice thing I wanted to be able to do is to embed a presentation in, say, a blog article. That's how I came with JSlide…

You can watch an example here, and see how it degrades when there is no javascript here.

Here's the way to create your own presentations :

First you have to download the following files (and the prototype library) :

Next, add the following markup to your page/article/whatever :

<div style="width:400px; height:300px; margin:0 auto">
  <div class="jslide">
    <!– Meta information : each line is optional –>
    <div class="meta">
      <div class="title">[title]</div>
      <div class="author">[author]</div>
      <div class="company">[company]</div>
      <div class="date">[date]</div>
    </div>

    <!– This generates automatically the titlepage –>
    <div class="frame titlepage"> </div>

    <!– A simple slide –>
    <div class="frame">
      <h3>[title]</h3>
      [content]
    </div>

    <!– A slide, shown steps by steps –>
    <div class="frame">
      <ul class="steps">
        <li>[step 1]</li>
        <li>[step 2]</li>
        <li>[step 3]</li>
      </ul>
    </div>
  </div>
</div>

That's it. You can also add the fullscreen class to the div having the jslide class if you want the slideshow to start in fullscreen (of course, this will work for only one slideshow on the page…).

Leave a Reply