Supersized js - Linking with another banner animation - button presses

Question

I'm trying to sync a plugin called Supersized:

http://buildinternet.com/project/supersized

with the jQuery Cycle plugin.

I've got everything working well by using a function to stop both the slides and then run them together in unison. The only place where I'm hitting a wall is with the nav buttons/keyboard presses.

The issue I'm having is that I need to be able to check if the supersized is already animating otherwise only the jquery cycle is triggered, putting my two images out of sync.

Supersized comes with a variable you can check to see if it's in animation. Only problem is, if you press the button or keypress it has already triggered the animation state by the time the on page script can check it.

Any ideas?

Answer 1

Alright, I worked out a way to do this, so I thought I should share.

As the slides are matched index wise, I just needed to make the jQuery Cycle current slide match which ever slide index is currently being displayed by supersized, with this function:

window.matchSlides = function()
{
    $j('#subBanner').cycle(vars.current_slide, 'fade');
}

The function is then called by beforeAnimation in my theme file (checking to see if the function exists - as I use this plugin in other sections of the site without this requirement as well:

if(typeof window.matchSlides == 'function') {
    window.matchSlides();
}