How to add an image gallery to swipe through on a slide of reveal.js?

Question

In a current project, I want to create a presentation like web-app for tablet (ipad for the beginning), where the user can swipe through slides to learn something about a product. Reveal.js seems to be a good option for that, but as usual I need just a little more functionality than provided out of the box ...

I'd like to have something like a image gallery on one of the slides – like 5x4 thumbnails, and if the user touches one of them, the image pops up in fullscreen, and the user can move forth and back within this gallery. If he has enough, he goes back to the gallery slide. I can emulate this behaviour with vertical subsection slides and add a "back to gallery " button to those subslides, and i'm exploring this possibility, but it seems a bit limited if I want to go any step further than that.

So questions are:

• is there a way to implement a gallery plugin to reveal.js?

• If so, which one of the many in the jquery realm will work well with reveal.js (given that reveal.js does not rely on jquery itself). Touch support would be kind of mandatory.

• are there alternatives to my approach?

• are there better tools for my task than reveal.js? I've been looking at impress.js and especially jmpress.js, but they seem to be more complicated / powerful than i actually need. This means: i had a nice result in reveal.js faster than i had in jmpress.js for my task.

I'm aware the question is still rather vague, but i'm exploring possibilities at the moment ...

Answer 1

I think you can redefine work of swipe with conditions by adding some code like this:

Reveal.addEventListener( 'somestate', function() {
    // TODO: Sprinkle magic
}, false );

more information about states look here