The usage description is also available in German, see S5Plugin Benutzung.
Eine deutsche Benutzungsbeschreibung siehe auf S5Plugin Benutzung.

S5 or how to run Slide Shows from your JSPWiki.#

This plugin provides an easy way to turn a single wiki-page in to a fully functional powerpoint slide show, running from your browser.
-- DF, Mar 2006, compatible with v2.3.90 (or later) of JSPWiki. ( tx Janne for the quick fixes )

It is based on the excellent Simple Standards-based Slide Show System, aka S5, by Eric A. Meyer. Read the basic primer or reference manual to get a grip of this cool concept !

All you need to do is divide your wiki page in %%slide ... %% blocks. A dropdown list allows you to switch between normal and slide-show mode or jump straight to a specific slide; walk through the presentation via simple keyboard or mouse clicks. The look & feel of the slide show is defined through CSS, so you can easy change it. More info here

The nice thing about combining S5 and a Wiki is simplicity. While S5 supports light-weight browser based slideshows, it still requires you to edit native html. With a wiki you get as bonus a light-weight wiki-markup to produce the contents as well as a great publishing environment.

Real-life Example: S5 introduction

Future ideas:

  • Jumping from one slide to another via an internal wiki-link doesnt work
  • Printing of a slide show: currently the wiki page can be printed as a normal doc.
  • Links (internal, external) should be modified to open in another window.
  • Animation of slides, aka 'incremental' slides (ref. S5 v1.1)
  • Auto-adapt to screen resolution (ref. S5 v1.1)
  • Export facility to produce a self-contained html for slide-shows on the road.
  • ...


In Normal mode, the plugin generates a dropdown to activate the slide-show as well as a postcard view on the header and footer of the slide.
In SlideShow mode, all you see is ... well your slide. Navigate via keyboard or mouse. Switch back to normal mode via the dropdown, or press T or ESC.


Start your wiki slideshow page with a call of the S5 plugin to define stuff like headers, footers or specific look&feel settings.
   [{brushed.jspwiki.s5plugin.S5 autostart='yes' header='...'  footer='...'  style='...' }]

Then, add your slides. Each slide should start with a !!!<title>. (use 3 ! for your title) Slide-notes go outside the %%slide block, and will not be shown in slide-show mode.

   !!! <title>
   * some slide bullet
   * another slide bullet
   Handouts or extra slide notes come here; they are hidden from the slideshow.

   !!! <another-title>
Typically, the first slide in the slide show will be a title slide. Embed your first slide in an extra %%title-slide block to get some special formatting.
   !!! <presentation-title>
   !! <presentation-sub-title>
   ! <name of presenter>
   ... any other text you would like to add ...
Following parameters are supported. (all are optional)
  • autostart : Optional. If yes, the slide-show will automatically start when the wiki page is viewed. Defaults to no.
  • header : Optional. This wiki-markup will be added to the header section of each slide.
    EG: [{brushed.jspwiki.s5plugin.S5 header='%%(text-align;right; ) confidential %%' }]
  • footer : Optional. This wiki-markup will be added to the footer section of each slide.
    EG: [{brushed.jspwiki.s5plugin.S5 footer='<Author> • dd-mmm-yyyy \\ <Title>' }]
  • style : (Optional) Define a css style sheet for overwrite the default look&feel of the presentation. You can also refer to another wiki-page to retrieve the stylesheet. [1]
    FFS: Uses the InsertCSSPlugin

[#1] : For the style paremeter, you can insert information from another wiki-page by specifying its [page-name] in square brackets.
Following line has the style parameter defined inline ...

   [{brushed.jspwiki.s5plugin.S5 style='p { margin:1em;}' }] 
and following line has the style parameter retrieved from another page.
   [{brushed.jspwiki.s5plugin.S5 style='[some-style-page]' }] 
For convenience, the inserted CSS stylesheet page is preprocessed
  • The first triple '{' block is assumed to contain the CSS definitions. When no such block is found, the complete page is taken. This allows to have annoted style pages. ( eg S5Plugin.Layout.UI )
  • Inside the CSS, when the construct url(...) contains a wiki-name in square brackets, the name will be expanded to the correct url. This way you can refer to wiki attachements for say background images. ( eg S5Plugin.Layout.I18N )

Step by step instructions :

  • download and unpack the
  • copy S5.jar to WEB-INF/lib/S5.jar
  • copy s5.css to scripts/s5.css
  • copy s5.js to scripts/s5.js
  • copy protoype.js to scripts/protoype.js

If you want, you can add the S5 plugin to your file

jspwiki.plugin.searchPath = brushed.jspwiki.s5plugin

Restart JSPWiki and you're done.

CSS Layout#

The default layout of the presentation is defined in a CSS, which is injected by the plugin. You can overwrite most of the look & feel by including your own CSS layout stylesheet.

Based on the templates shipped with S5, I created some CSS layouts to get started quickly. These can serve as hints how to build your own presentation layout.


The S5 plugin is powered by javascript and css, which is heavily inspired by the work of E.A.Meyer. The approach of the original S5 seems somewhat complex in order to comply to several standards and browser limitations. With this plugin, I tried to take a more simpler approach, may be sometimes a to simplistic approach. The javascript is greatly simplified through the use of protoype.js, an excellent AJAX enabled js library.

Supported browsers: Safari, Firefox, Shiira, Not yet ok: Opera To test: IE

The plugin itself insert the necessary resource links for the .js and .css files. It uses some new JSPWiki API's available in the 2.3.x version. Unfortunately, there is now easy way to make plugin resources, such as the javascript and default css available from the JAR -- you will need to do some manual copy actions to install the plugin.

It injects following html in the wiki page, which acts as a placeholder for the dropdown, and DIV blocks for header, footer, pagenumber and slide-show background.

This wiki-markup

  [{brushed.jspwiki.s5plugin.S5 header='%%(text-align:right;)DRAFT%%' 
       footer='AUTHOR &bull; dd-mmm-yyyy \\\\ SLIDE SHOW TITLE'
generates following html:
<div id="s5layout" autostart="yes">
<div id="s5background" ></div>
<div id="s5header" >
  <div style="text-align:right;">DRAFT</div>
<div id="s5footer" >
  <div>AUTHOR &bull; dd-mmm-yyyy <br />SLIDE SHOW TITLE</div>
  <div id="s5page-nr" ></div>
  <form action='#' ><select id="s5controls"></select></form>

The zip file seems to be corrupt....or maybe I am doing something wrong. Sounds like a great plugin though

--AnonymousCoward, 18-Aug-2006

Try to load the original version (version 1). I don't know why other versions have been loaded; --DF

Thanks for the working jar...great plugin

--Rayalu, 22-Aug-2006

The ZIP file works fine for me. I changed it to fix the NullPointerException that occured when one didn’t pass the autostart option.

--Candid Dauth, 22-Aug-2006

I am having two problems on my IE browset that aren't issues in Firefox:

a. Solid background colors in slideshow view arent working. While changes in the css file are reflected in firefox, nothing happens in IE. So in slideshow view, the wiki page is still visible.

b. I have been getting a Stack overlow error when I load the wikipage with the presentation in IE.

I would appreciate some help ...

--IliaG, 24-Aug-2006

Under 2.6.1, I can't get this to work in FF or IE7. When I go to the page, I get a javascript error on line 12 which looks to be the DTD line. IN FF, it also complains that the css file is text/html and not text/css. Any ideas?

--LouMasters, 21-Feb-2008

I'm afraid the current S5 plugin is not compatible with v2.6.1 of JSPWiki. The S5 Plugin runs on an older version of the BrushedTemplate, which was based on the Prototype javascript library. The latest v2.6.1 JSPWiki is using the MootoolsJavascriptLibrary, which is not compatible with this version of S5. I don't think the porting is that hard, but will require some js/moo skills. --DF

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
s5-normal-view.jpg 46.0 kB 1 25-Mar-2006 21:11 Dirk Frederickx
s5-slide-view.jpg 57.5 kB 1 25-Mar-2006 21:11 Dirk Frederickx
zip 25.6 kB 3 11-Aug-2006 11:29 Candid Dauth
« This page (revision-20) was last changed on 21-Feb-2008 19:10 by DirkFrederickx