I am attempting to modify the example set here:

/

...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.

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.

• javascript
• jquery
• customization
• caroufredsel

Share Improve this question Follow edited Mar 13, 2014 at 17:08 tshepang 12.5k2525 gold badges9797 silver badges139139 bronze badges asked Feb 18, 2014 at 18:00 Murphy1976Murphy1976 1,47588 gold badges4343 silver badges9191 bronze badges 9

• can you create a demo? – Juan Commented Mar 4, 2014 at 17:53
• jsfiddle/murphy1976/7XGtM This jFiddle solves the VERTICAL scrolling, but I cannot figure out how to wrap the images in DIVs and still get the code to work properly. The FULL BOUNTY will need to solve that puzzle. – Murphy1976 Commented Mar 4, 2014 at 17:53
• For more insight on what I'm looking to do, and what the bounty SHOULD HAVE been for (I apologize for setting THIS question as the bounty, it's my first one), PLEASE VIST THIS QUESTION: stackoverflow./questions/22177804/image-billboard-issues – Murphy1976 Commented Mar 4, 2014 at 18:10
• the JSFiddle, unfortunately, is not working for me. there are a few console errors – Irvin Zhan Commented Mar 4, 2014 at 18:30
• 1 @Murphy1976 you have thumb and $('#thumbs') in your js but not in your html – Juan Commented Mar 4, 2014 at 18:37

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3 +100

http://jsbin./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;
}

I guess this example will help you: http://jsbin./geqakupe/4/edit

You should set directon:"up" and height:"100%" options. You also need to change the positioning element #pager-wrapper and set different height and width to it.