3

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.

tshepang
  • 10,772
  • 21
  • 84
  • 127
Murphy1976
  • 1,243
  • 5
  • 36
  • 83
  • can you create a demo? – Juan Mar 04 '14 at 17:53
  • http://jsfiddle.net/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 Mar 04 '14 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: http://stackoverflow.com/questions/22177804/image-billboard-issues – Murphy1976 Mar 04 '14 at 18:10
  • the JSFiddle, unfortunately, is not working for me. there are a few console errors – Irvin Zhan Mar 04 '14 at 18:30
  • @Irvin Zhan - The only errors I was getting when I wrote it were broken images. I modified the linked jFiddle to include the issue that I am currently looking for (getting the rotator to work when wrapping the images in DIVs), but I don't think anyone is paying attention to that portion of the question. – Murphy1976 Mar 04 '14 at 18:33
  • definitely trying to help, but I cant replicate the behavior until the carousel is working. I am getting `Uncaught ReferenceError: thumbs is not defined ` – Irvin Zhan Mar 04 '14 at 18:36
  • 1
    @Murphy1976 you have thumb and $('#thumbs') in your js but not in your html – Juan Mar 04 '14 at 18:37
  • @Irvin Zhan, didn't mean to come across as ungrateful. Didn't think there were any errors other than the broken images. I have completely removed the THUMBS as they are not needed. – Murphy1976 Mar 04 '14 at 18:44
  • definitely didnt feel that way at all! glad you got the issue solved! – Irvin Zhan Mar 05 '14 at 00:33

2 Answers2

3

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;
}
Goodnickoff
  • 2,287
  • 1
  • 13
  • 14
1

I guess this example will help you: http://jsbin.com/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.

Goodnickoff
  • 2,287
  • 1
  • 13
  • 14
  • As stated in the appended comments of the question, I have figured that part out, I meant to place the bounty on another question that deals with this same carousel, but I need to wrap the carousel images in DIVs. I sincerely apologize for the confusion. – Murphy1976 Mar 04 '14 at 18:13