Example CarouFredSel # 61 - Vertical instead of horizontal

I am trying to modify the example given here:

http://coolcarousels.frebsite.nl/c/61/

... to display thumbnails vertically, not horizontally.

Demo

Everything is set up for me, and the carousel works fine, but the obstacle I’m going to deal with now is the underlined sketch appears in the upper part, and not in the middle (I have a number of thumbnails up to 3).

here is a modified version of Javascript that runs the carousel:

$(function() {
    var $carousel = $('#carousel'),
        $pager = $('#pager');

    function getCenterThumb() {
        var $visible = $pager.triggerHandler( 'currentVisible' ),
            center = Math.floor($visible.length / 2);
        return center;
    }

    $carousel.carouFredSel({
        responsive: true,
        items: {
            visible: 1,
            width: 746,
            height: (214/746*100) + '%'
        },
        scroll: {
            fx: 'scroll',
            onBefore: function( data ) {
                var src = data.items.visible.first().attr( 'src' );
                src = src.split( '/large/' ).join( '/small/' );

                $pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
                $pager.find( 'img' ).removeClass( 'selected' );
            },
            onAfter: function() {
                $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
            }
        },
        pagination: {
            container: '#nav'
        },
        duration: 10000,
    });

    $pager.carouFredSel({
        width: '252px',
        direction: 'up',
        auto: false,
        items: {
            visible: '1',
            width: 252,
            height: (71/252*100) + '%'
        },
        scroll:{
            items: '3',
        },
        onCreate: function() {
            var center = getCenterThumb();
            $pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
            $pager.find( 'img' ).eq( center ).addClass( 'selected' );
        }
    });

    $pager.find( 'img' ).click(function() {
        var src = $(this).attr( 'src' );
        src = src.split( '/small/' ).join( '/large/' );
        $carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
    });

    $('#nav').hover(function() {
        var current = $('#carousel').triggerHandler( 'currentPosition' );
        thumbs.trigger( 'slideTo', [ current, 0, true, { fx: 'none' } ] );
        $('#thumbs').stop().fadeTo(300, 1);
    }, function() {
        $('#thumbs').stop().fadeTo(300, 0);
    });

    $('#nav a').mouseenter(function() {
        var index = $('#nav a').index( $(this) );

        //  clear the queue
        thumbs.trigger( 'queue', [[]] );

        //  scroll
        thumbs.trigger( 'slideTo', [index, { queue: true }] );
    });
});

Does anyone have an idea on how to change the SELECTED thumbnail from FIRST on the stack to SECOND and still line up with the main carousel?

EDITOR: I thought I was sending generosity to another question about this carousel. Therefore, I will add another poem that I want to do.

, DIV , ? src , .