impress.js: How to run function on slide #id and class .active (or slide enter)?

Question

How do make a video play on slide enter, and make it stop on slide exit with impress.js? Upon entering a slide, there is a class ".active". In fact, I can just use a unique ID, I just need to know how to tell impress.js to run on slide enter/exit.

I don't know how to code jQuery, but this was my attempt

document.getElementById('video-audio').addEventListener( ($.Event("keydown", { keyCode: 38 })), function () {WhenPlay()});

function WhenPlay() { 
 var classList = document.getElementById('video-audio').className.split(/\s+/);
      for (var i = 0; i < classList.length; i++) {
        if (classList[i] === 'active') {
        //console.log(classList[i]);
                        playVideo();
                     }
                  }
              }

anyone? or can anyone guide me to a function that gets called every time i swap slides, that would work also. — sandraqu, May 02 '12 at 21:46
I don't know if this will help, but: http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/ — Connor, May 03 '12 at 01:53

score 2 · Answer 1 · edited Feb 24 '13 at 11:03

I don't know if this is solved for you, but have you tried something like this?

$(function() {

    impress().init();
    $('.hidden').css('opacity',0);
    window.addEventListener('impress:stepenter', function() {
      $('.hidden.active').animate({'opacity': 1});
    });
    window.addEventListener('impress:stepleave', function() {
      $('.hidden.past').animate({'opacity': 0});
    });

});

here 'impress:stepenter' is an event bubbled out by the Impress.js library.

impress.js: How to run function on slide #id and class .active (or slide enter)?

1 Answers1