How do I use subpanels in vertical mode?

[Scopestyle]

I'm trying to use the sub panels as seen in this JSfiddle from the wiki page: http://jsfiddle.net/Mottie/ycUB6/5399/

What I would like to achieve is to have the default behavior be vertical (mode: v), and then navigate horizontal from within the subpanels itself. I would like to know how I would go about achieving this.

I have gotten this far but actually editing the JavaScript part leaves is giving me headaches ...

http://jsfiddle.net/Scopestyle/FZ6fL/

[Mottie]

Hi @Scopestyle!

Just a few minor changes are needed (demo)... some extra css to position the subitem panels next to each other horizontally; including making the main panel (panel 2) wide enough to contain all sub items:

.panel2 {
    width: 1000px !important;
}
.subitem {
    position: relative;
    display: inline-block;
}

Then change the script to use left position instead of scroll position:

$(function(){

    var $slider = $('#slider').anythingSlider({
        mode : "v",
        buildNavigation : false,
        buildStartStop : false,
        buildArrows : true
    }),
    $panel2 = $('#slider .panel2');

    $('.submenu a').on('click', function(){
        var indx = $(this).data('index'),
            left = $panel2.find('.subitem:eq(' + indx + ')').position().left,
            slider = $slider.data('AnythingSlider');
        if (slider.currentPage === 2) {
            // animate to image/div directly
            $panel2.stop(true, true).animate({ left : -left }, 800);
        } else {
            // animate to submenu after we scroll to the page
            slider.gotoPage(2, false, function(){
                $panel2.stop(true, true).animate({ left : -left }, 800);
            });
        }
    });

});

[Scopestyle]

Super, thanx!