FsFx

for Reveal.js

FsFx.js

Can do a few things:

1. Enter or exit fullscreen
2. Trigger 'next slide' after fullscreen
3. Toggle a class on any element if fullscreen
4. Auto-generate a fullscreen button

If a device does not support the Fullscreen API, a class of no-fsfx is added to the body. Use it to show warnings, hide elements, and so on.

1. Enter or exit fullscreen

• Triggers if an element with a certain class is clicked
• This baseclass is fsbutton by default
• The baseclass can be changed in the plugin options

2. Trigger 'next slide' after fullscreen

The start button on the first slide of this deck does exactly that

• If wanted, a 'next slide' function can be called
• It can be added with a data-fs-gonext="*" attribute
• The wildcard is the delay in milliseconds

3. Toggle a class on any element in fullscreen

• A class toggle can be added with data-fs-toggle="*"
• The wildcard is the class that is toggled in fullscreen
• The Reveal element always gets the fullscreen class
• In this presentation, see the changes in fullscreen: the background and the button icons

4. Auto-generate a fullscreen button

• FsFx can generate a fullscreen button in your presentation (like in this one, top right)
• This is only done if no such button exists outside the slides
• The styling is included; colour and position can be tweaked

FsFx

for Reveal.js

FsFx.js

Can do a few things:

1. Enter or exit fullscreen
2. Trigger 'next slide' after fullscreen
3. Toggle a class on any element if fullscreen
4. Auto-generate a fullscreen button

If a device does not support the Fullscreen API, a class of no-fsfx is added to the body. Use it to show warnings, hide elements, and so on.

1. Enter or exit fullscreen

• Triggers if an element with a certain class is clicked
• This baseclass is fsbutton by default
• The baseclass can be changed in the plugin options

2. Trigger 'next slide' after fullscreen

The start button on the first slide of this deck does exactly that

• If wanted, a 'next slide' function can be called
• It can be added with a data-fs-gonext="*" attribute
• The wildcard is the delay in milliseconds

3. Toggle a class on any element in fullscreen

• A class toggle can be added with data-fs-toggle="*"
• The wildcard is the class that is toggled in fullscreen
• The Reveal element always gets the fullscreen class
• In this presentation, see the changes in fullscreen: the background and the button icons

4. Auto-generate a fullscreen button

• FsFx can generate a fullscreen button in your presentation (like in this one, top right)
• This is only done if no such button exists outside the slides
• The styling is included; colour and position can be tweaked