S5 Reloaded plugin for DokuWiki, with Scriptaculous

View page as slide show

S5 Reloaded plugin for DokuWiki, with Scriptaculous

Tomás Alonso Albi

Observatorio Astronómico Nacional


Code for this presentation: http://conga.oan.es/~alonso/s5reloadedtest.txt


  • S5 plugin by Andreas Gohr taken as starting point, implementing S5 by Eric Meyer
  • Integration of S5 reloaded version by Christian Effenberger
  • S5 reloaded includes a control bar, time and notes window, scalable images, autoplay, sound, fade effects between transparencies, ...
  • 20 customizable themes ready to be used: dokuwiki, default, blue, pixel, i18n, flower, executive, tango, tangodevweb, gorilla, ultraviolet, mandarina, quality, yatil, sunny, school, faucet, garlandia, vmc, and thesis
  • An even scriptaculous effects using presentacular, by Jose Manuel Caicedo!

And all these features can be used from DokuWiki. Let's see some of them.

First note for this slice

Second note

Scalable images

Images are shown with class=“scale” by default, and this applies always unless you only specify width OR height in the image link. Resize the window to see how the images are scaled.

First note for this slice

Second note

Effects using HTML tag code

Effects in lists requires to use the HTML tag in DokuWiki, but this is quite easy and you don't have to write a lot. This text will grow and appear in 2 second.
  • Pulsate this first point, and remove subpoints in 3 seconds forever
    • Subpoint 1
    • Subpoint 2
    • Subpoint 3
  • Third point, everything disappear progresively. You will never see this again.
    • Subpoint 1
    • Subpoint 2
    • Subpoint 3

We can also display one word at a time, or a phrase at a time, or even one letter at a time!

(But HTML code is not very clean)

Available effects

In most of them you can control the duration of the effect. See scriptaculous for reference.

  • blinddown: Effect.BlindDown, blindup: Effect.BlindUp
  • puff: Effect.Puff, highlight: Effect.Highlight
  • shake: Effect.Shake, pulsate: Effect.Pulsate
  • slidedown: Effect.SlideDown, slideup: Effect.SlideUp
  • grow: Effect.Grow, shrink: Effect.Shrink
  • fade: Effect.Fade, appear: Effect.Appear
  • fold: Effect.Fold, dropout: Effect.DropOut
  • switchoff: Effect.SwitchOff, squish: Effect.Squish

Compatibility with other plugins

You can use also other plugins to show sortable tables (sortablejs), formulae (asciimath), graphs (ditaa) and charts (charter), or tips (wrap).

My tip This is my tip
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Right $$sqrtx$$. $$a_(mn)$$
Row 3 Col 1 Row 3 Col 2 $$(x+1)/y$$

Simple 3D pie chart

public static void main(String args[]) {
   // Some program

Compatibility with MathJax

$$ \frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x) $$

Inline equation example $a^2 + b^2 = c^2$ is also working in slide mode.

\[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} = 0 \end{aligned} \]

Using PulpCore


Using Galleria javascript library

Image description

This example is a classic gallery that fetches image data from a list of IMG elements and generates thumbnails. PLEASE NOTE THIS FEATURE IN S5RELOADED IS EXPERIMENTAL, STILL NOT AVAILABLE.

And that's all

Bye Bye
  This is the end
s5reloadedtest.txt · created: 2010/07/21 13:44 (Last modified 2013/07/04 15:36) by Tomás Alonso Albi
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki