Please be have patience with a newbie.

Ok, i hope i can explain it.

I have a scrollable vertical that has 4 scrollable insite. This 4 scrollables are controlled by thumnails that are in another scrollable. So every one off this 4 scrollable has a navi-scrollable.

First my code:

1. // main vertical scroll
2. $("#mainscroll").scrollable({
3.     // basic settings
4.     vertical: true,
5.     size: 1,
6.     clickable: false,
7.     // up/down keys will always control this scrollable
8.     keyboard: 'static',
9.     // assign left/right keys to the actively viewed scrollable
10.     onSeek: function(event, i) {
11.         horizontal.scrollable(i).focus();
12.     }
13. // main navigator
14. }).navigator("#main-navi");
15. // horizontal scrollables. each one is circular and has its own navigator instance
16. var horizontal = $(".scrollable").scrollable({size: 1,clickable:false, globalNav:true}).circular().navigator({
17.         navi: ".scrollable-navi",
18.         naviItem: 'img',
19.     });
20. // initialize scrollable-navi
21. $("div.scrollable-navi").scrollable({size: 3,nextPage:'.nexting',prevPage:'.preving'});
22. // when page loads setu
23. horizontal.eq(0).scrollable().focus();

As you can see, i set for the horizontal scrolls that resists in the main, the navigation ".scrollable-navi" and thumbs "img". But i bet the profis know that this scrollable-navi(s) control all horizontal scrolls.

Sure, i can make horizontal1, horizontal2 and so on and can give them all unique id's. But i think there must be a better way. Is there a way to say: "hey horizontal, use the next .scrollable-navi"?

It also would be nice to set the assign left/right keys to the scrollable-navi and not the horizontal. But i dont know what onSeek: function(event, i) exactly means.

If somebody wants a link to the production site to see what i mean i can sent it private.