CarouFredSel Example #61 - Vertical instead of Horizontal

Question

I am attempting to modify the example set here:

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

...to display the thumbnails vertically, rather than horizontally.

DEMO

I have everything set up and the carousel is working fine, but the hurdle I am going over now is the highlighted thumbnail appears at the TOP rather than the middle (I have the thumbnail count down to 3).

here is the modified version of the Javascript that is running 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 }] );
    });
});

Anyone have any idea on how to change the SELECTED thumbnail from the FIRST in the stack, to the SECOND and still line up with the main Carousel?

EDIT: I thought I was posting the bounty on another question had about this carousel. So I'll add the other poont I wish to make.

HOW can I modify the code to allow for the images to be contained in DIVs and still function the way I stated above? I have toyed with the src variable and trigger call, but haven't had much luck in reaching my goal.

Answer 1

http://jsbin.com/geqakupe/10/edit

I changed this line: var src = data.items.visible.first().find('img').attr( 'src' ); in on before event and add this css rules:

#carousel div{
   position:relative;
}
#carousel {
   width: 800px;
   height: 500px;
   overflow: hidden;
   position:relative;
}
#carousel h1{
   position:absolute;
   top:0;
   left:105px;
   font-size:30px;
  color:red;
}