backstretch and idle-timer - making them worth together

Question

I'm using the backstretch.js jquery module to make a background slideshow.

Now, what I want to do is add in the jquery idle-timer, and have it interact with some of backstretch's elements.

I've got a piece of code working, which shows and hides certain elements based upon what item I'm on.

The Backstretch code is like this and works:

var images = [
    "/images/01.jpg",
    "/images/02.jpg",
    "/images/03.jpg"
];

// The index variable will keep track of which image is currently showing
var index = 0;

// Call backstretch for the first time, and increments the index instance.
$.backstretch(images, {speed: 500});
//immediately pause the slideshow
$('body').data('backstretch').pause();

$(window).on("backstretch.show", function (e, instance) {
     if (instance.index === 0 ) {
        $('#prev').hide();
        $('#next').show();
    } else if (instance.index === instance.images.length - 1) {
        $('#prev').hide();
        $('#next').hide();
    } else {
        $('#prev').show();
        $('#next').show();
    };
});

On the first picture, it shows only the 'next' button. On the last, only 'prev' button. And on the rest, both buttons.

The Idle-Timer code looks like this (and it works too). It hides the nav buttons after five seconds, and then shows them when you touch the page again.

$(document).ready(function(){
    $(document).idleTimer( 5000 );
        $(document).bind("idle.idleTimer", function(){
        $("#prev").fadeOut(1000);
        $("#next").fadeOut(1000);
    });
    $(document).bind("active.idleTimer", function(){
        $("#prev").fadeIn(1000);
        $("#next").fadeIn(1000);
    });
});

When showing the first picture, you'll see only the next button, then wait and the button will hide. Then move the mouse and the next and prev button is shown by the second part of the idle-timer.

So I think I want it to look something like this (which doesn't work):

$(document).ready(function(){
    $(document).idleTimer( 5000 );
        $(document).bind("idle.idleTimer", function(){
        $("#prev").fadeOut(1000);
        $("#next").fadeOut(1000);
    });
    $(document).bind("active.idleTimer", function(){
        if (instance.index === 0 ) {
            $("#next").fadeIn(1000);
        } else if (instance.index === instance.images.length - 1) {
            $("#prev").fadeIn(1000);
        } else { 
            $("#prev").fadeIn(1000);
            $("#next").fadeIn(1000);
        };  
    });
});

Though, this gives me an error about the index not being defined. So can I break the index & instance.index out into global variables for the idleTimer to access? If so, how?

Answer 1

Instead of using fadein/out in backstretch, I made that first script add and remove a class (i used ".showme") depending on which slide it was on.

That showme class is just a display:block; and I set the elements to have a default of display:none;

And then the idletimer script refers only to that one class to fadeIn/Out.

Not perfect, but it does work. Without having to try to fish the instance out into a global variable.