jQuery Cycle multi slideshows and independent keyboard navigation
I have a page with 2 (or more) jQuery tabs. Each t开发者_如何学Cab 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.
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();
});
}
});
精彩评论