CarouFredSel示例#61-垂直而不是水平 [英] CarouFredSel Example #61 - Vertical instead of Horizontal

问题描述

我正在尝试修改此处设置的示例:

I am attempting to modify the example set here:

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

...以垂直显示缩略图，而不是水平显示.

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

演示

DEMO

我已完成所有设置，轮播工作正常，但是我要克服的障碍是突出显示的缩略图出现在顶部，而不是中间(我的缩略图数减少到3个).

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

这是运行轮播的Javascript的修改版本:

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 }] );
    });
});

任何人都知道如何将SELECTED缩略图从堆栈中的FIRST更改为SECOND并仍与主轮播对齐吗?

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?

我以为我是在悬赏关于这个旋转木马的另一个问题上发布的.因此，我要添加另一个要点.

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.

我如何修改代码以使图像包含在DIV中，并且仍然可以按照我上面所述的方式运行?我玩弄了src变量和触发器调用，但是实现目标并没有多大运气.

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.

推荐答案

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

我在on before事件中更改了以下行:var src = data.items.visible.first().find('img').attr( 'src' );并添加了此CSS规则:

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;
}

这篇关于CarouFredSel示例#61-垂直而不是水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！