jQuery Cycle multi slideshows and independent keyboard navigation.

Question

I have a page with 2 (or more) jQuery tabs. Each tab contains a jQuery Cycle slideshow with prev/next paging appended in the code.

I've added keyboard navigation of the slideshows, based on a tutorial at jqueryfordesigners dot com.

Keyboard nav works for each slideshow but the slides page in synchrony, i.e. if paging to the 3rd slide in tab 1, when tab 2 is viewed it is showing it's 3rd too.

Any way to make them page independently?

See http://pastie.org/916682

Edit: the slideshows page independently when clicking prev/next, but not with kbd nav.

Answer 1

Solved. I'd been missing the obvious: the major difference between the active and inactive tabs is visibility, so adding :visible to the penultimate selector (for the tab divs) is all it took.

$(document.documentElement).keyup(function(event) {
    var direction = null;
    if (event.keyCode == 37) {
        direction = 'prev';
    } else if (event.keyCode == 39) {
        direction = 'next';
    }
    if (direction != null) {
        $('#content > div:visible').each(function(index) {
            $('#prev-slide,#next-slide', this)[direction]().click();
        });
    }
});