2 jcarousels influencing one another

I have 2 jcarousels:

First that acts like thumbnails limited to 4

Second that shows big image, only one

when clicked on the thumbnail the second jcarousel scrolls to the appropriate image, now that i manage to do.

the second jcarousel has prev/next buttons, when clicked it will scroll to the prev/next image, now the problem is that now the first (thumbnail) jcarousel should scroll to the appropriate thumbnail.

EDIT:

How to send position of second jcarousel to the first one and change postion (on first jC)? When next/prev button is pressed on the second carousel, how to manipulate the first carousel?

See the demo http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

(press on the thumbnailas, it will change the position of the second carousel, i need now to change the position of the selected thumbnail (thumbnail carousel) when the prev/next is clicked on second carousel)

JS:

function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('rel')));

        jQuery('.jcarousel-control a').removeClass('active');
        jQuery(this).addClass('active');

        jQuery('.jcarousel-item').removeClass('highliht');
        jQuery('.jcarousel-item-'+jQuery(this).attr('rel')).addClass('highliht');

        return false;
    });
    jQuery('#mycarousel li.jcarousel-item').click(function() {
        jQuery('.jcarousel-item').removeClass('highliht');
        jQuery(this).addClass('highliht');

        jQuery('.jcarousel-control a').removeClass('active');
        jQuery('.jcarousel-control a#cnt-'+jQuery(this).attr('jcarouselindex')).addClass('active');
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('jcarouselindex')));

        return false;
    });开发者_StackOverflow中文版
    jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
            //chage position on mycarousel
    });

}

jQuery(document).ready(function() {
    //set border on first thumbnail & control
    jQuery('.jcarousel-control a#cnt-1').addClass('active');
    jQuery('#mycarousel li:first').addClass('highliht');


    jQuery('#mycarousel').jcarousel({
        scroll: 4,
        initCallback: mycarousel_initCallback
    });
    jQuery('#showcasecarousel').jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback
    });
});

The HTML and CSS (demo): http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

You have attached same cllback functions for both carousel.

Specify the callback function for each carousel in document.ready() as different functions as: mycarousel_initCallback and mycarousel_initCallbackanother

jQuery(document).ready(function() {
jQuery('.jcarousel-control a#cnt-1').addClass('active');
jQuery('#mycarousel li:first').addClass('highliht');


jQuery('#mycarousel').jcarousel({
    scroll: 4,
    initCallback: mycarousel_initCallback
});

jQuery('#showcasecarousel').jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallbackanother
});

});

extract the code for the #showcasecarousel from mycarousel_initCallback and put it as a separate function: as

 function mycarousel_initCallbackanother(carousel) {
  jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
            //chage position on mycarousel
     });
 }