Trouble in synchronising and/or adding captions to images using caroufredsel plugin

Question

I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/ Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.

my css looks like this::

        html, body {
            height: 100%;
            padding: 0;
            margin: 0px;
        }
        body {

            min-height: 400px;
        }

        #wrapper {
            width: 697px;
            height: 400px;
            margin: -155px 0 0 -330px;
            position: absolute;
            top: 270px;
            left: 50%;
            box-shadow: 0px 1px 20px #c5a101;
            border:3px solid #c5a101;
            background-color: rgba(246,217,90,0.9);
        }

        #carousel {
            width: 580px;
            height: 360px;
            overflow: hidden;
            position: relative;
            z-index: 2;
            float:left;

        }

        #carousel img {
            display: block;
            float: left;

        }

        #pager {
            width: 112px;
            height: 350px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;    
        }
        #pager div {
            height: 81px;
            width: 100px;
            box-shadow: 0px 0px 5px #c5a101;
        }
        #pager img {
            cursor: pointer;
            display: block;
            height: 81px;
            width: 112px;
            margin-bottom: 5px;
            float: left;
            border:3px solid #c5a101;
            cursor:default;
        }

        #texts-wrapper {
            width: 700px;
            height: 50px;
            float: left;

        }           

        #texts > div {
            width: 300px;
            height: 50px;
            position: relative;
            float: left;
            margin-top: auto;               
        }
        #texts > div > div {
            width: 700px;
            position: absolute;
            left: 2px;
            bottom: 5px;
            float: right;
            padding-top: 25px;
        }

        #texts a {
            color:#083377; 
            font-family:Trajan Pro;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
            text-decoration: none;
            outline: none;
            display: block;
            background-color: rgba(248,229,145,0.4);
            border: 1px solid rgba(246,217,90,0.4);
            width: 700px;
            height: 85px;                
            padding-left: 10px;             

        }
        #texts a:hover {
            background-color: rgba(255,208,0,0.9);
            box-shadow: 0px 2px 15px #c5a101;
            color: rgba(227,75,76,0.7);

        } 

my html code looks like this::

<div id="wrapper">
            <div id="inner">
                <div id="carousel">
                    <img src="img/building.jpg" width="580" height="350" />
                    <img src="img/guytalkingtokids.jpg" width="580" height="350" />
                    <img src="img/group.jpg" width="580" height="350" />
                    <img src="img/oath.jpg" width="580" height="350" />
                    <img src="img/finalists.jpg" width="580" height="350" />
                </div>
                <div id="pager"></div>
            </div>

            <div id="texts-wrapper">

                <div id="texts">
                    <div>
                        <a style="text-decoration:none; " href="blank.html" >
                            <div><p>The red building across the street.</p> </div></a>
                    </div>

                    <div>
                        <a style="text-decoration:none;" href="blank.html" >
                            <div><p>How yall doin? blah blah</p> </div></a>
                    </div>

                    <div>
                        <a style="text-decoration:none;" href="blank.html" >
                            <div><p>Lotsa ppl!.</p></div></a>
                    </div>

                    <div>
                        <a style="text-decoration:none;" href="blank.html" >
                            <div><p>I put another caption!</p></div></a>
                    </div>

                    <div>
                        <a style="text-decoration:none;" href="blank.html" >
                            <div> <p>Yay! We won?! How?!</p></div></a>
                    </div>                      
                </div>
          </div>                
        </div>

And my script tag looks like::

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

            //  gather the thumbnails
            var $thumb = $( '<div class="thumb" />' );
            $carousel.children().each(function() {
                var src = $(this).attr( 'src' );
                $thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
            });

            //  duplicate the thumbnails
            for (var a = 0; a < $carousel.children().length - 1; a++) {
                $pager.append( $thumb.clone() );
            }

            //  create large carousel
            $carousel.carouFredSel({
                    items: {
                    visible: 1,
                    width: 580,
                    height: 350
                },
                //auto:false,/* temporary: to stop automatic scrolling */
                scroll: {
                    fx: 'directscroll',
                    pauseOnHover:true,
                    duration: 500,
                    timeoutDuration: 5500,
                    onBefore: function( data ) {
                        var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
                            newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
                            $t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();

                        $t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
                    }
                }
            });

            //  create thumb carousels
            var $thumbs = $('.thumb');
            $thumbs.each(function( i ) {
                $(this).carouFredSel({
                    auto: false,
                    scroll: {
                        fx: 'directscroll'
                    },
                    responsive:true,
                    items: {
                        start: i+1,
                        visible: 1,
                        width: 112,
                        height: 89.6
                    }
                });

                //  click the carousel---> comment out this portion to disable the click function on small images

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

            });

            // comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
            $('#texts').carouFredSel({
                items: 1,
                direction: 'left',
                responsive:true,
                auto: {
                    play: true,
                    duration: 500,
                    easing: 'quadratic',
                    timeoutDuration: 5500
                }
             });

        });

Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.

Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...

$('#texts').carouFredSel({
                items: 1,
                direction: 'left',
                responsive:true,
                synchronise:{"#carousel"},/*This is the new line I added*/
                auto: {
                    play: true,
                    duration: 500,
                    easing: 'quadratic',
                    timeoutDuration: 5500
                }
             });

Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.

Answer 1

After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.

Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.

Anyway coming back to the problem, I added this piece of code...

//sais try: synchronise texts and carousel to work together and on click
                        var index = $(this).triggerHandler( 'currentPosition' );
                        if ( index == 0 ) {
                            index = $(this).children().length;
                        }
                        //  trigger the titles carousel
                        $('#texts').trigger('slideTo', [ index, 'next' ]);

right here...

//  create large carousel
            $carousel.carouFredSel({
                    items: {
                    visible: 1,
                    width: 580,
                    height: 350
                },
                //auto:false,/* temporary: to stop automatic scrolling */
                scroll: {
                    fx: 'directscroll',
                    pauseOnHover:true,
                    duration: 500,
                    timeoutDuration: 3500,
                    onBefore: function( data ) {
                        var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
                            newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
                            $t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();

                        $t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
                        /* [ the code goes here!]*/

now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.

I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work