how to get the index number of jcarousel items in a circular carousel

I am trying to build a user interface using jcarousel. The carousel needs to be 开发者_StackOverflowable to move indefinitely in either direction, so have configured it using wrap:circular. When a carousel li item is clicked, its corresponding larger image needs to display in the main content area.

Currently the first two thumbnails on the page will show the desired behavior. You can see this at http://www.brookscustom.com/live-edge/live-edge.php#

The problem is that the the carousel will not return an index number for an item once you've scrolled past the actual number of items on the page. What happens is that there is a custom attribute assigned to each item called jcarouselindex, which just goes either up or down infinitely in either direction as you scroll. My next idea was to assign an id of 1, 2, 3, etc to each list item but those id's as well are lost once you scroll past the actual number of li's on the page. So, if I have 10 items with id #1-10, when you scroll to the right to the "eleventh" item it will not have id#1 as you might expect. They are given classes by the script but won't retain the id you give it on the page.

Therefore for this to work I need to be able to access a value for each list item no matter how far the user has scrolled and use that to target the proper large image. Any ideas? I appreciate it.

It seems you fixed your problem, but I was just implementing something very similar to you. I don't know if you are familiar with Knockout? It is a sweet little library, I would recommend using that together with jcarousel.

Basically you can create an observable array of your images, add this to your carousel, add a function to each item in your array that is fired on click in the carousel and this function loads a large version of the image in your content area.

I ran into the same issue. The solution is to use the modulo function (remainder after division):

(idx + count) % count

Here is the function being used in the context of a callback function:

  var itemVisibleInCallback = function(carousel, item, idx, state) {
    var $thumbnails = $('.thumbnails img');
    var count = $thumbnails.length;
    var index = (idx + count) % count - 1; //subtract 1 so that the index will be 0-based
    $thumbnails.eq(index).addClass("selected");
  };

  $('.my-carousel').jcarousel({
    wrap: 'circular',
    itemVisibleInCallback: itemVisibleInCallback
    // other unrelated config values...
  });

Write this code in side Document.ready function

        function mycarousel_initCallback(
                                        carousel) {

                                    //alert(this.mycarousel);   
                                //  alert("inside carousel");
                                    // Disable autoscrolling if
                                    // the user clicks the prev
                                    // or next button.
                                    carousel.buttonNext
                                            .bind(
                                                    'click',
                                                    function() {
                                                        carousel
                                                                .startAuto(0);
                                                    });

                                    carousel.buttonPrev
                                            .bind(
                                                    'click',
                                                    function() {
                                                        carousel
                                                                .startAuto(0);
                                                    });

                                    // Pause autoscrolling if
                                    // the user moves with the
                                    // cursor over the clip.
                                    carousel.clip
                                            .hover(
                                                    function() {
                                                        carousel
                                                                .stopAuto();
                                                    },
                                                    function() {
                                                        carousel
                                                                .startAuto();
                                                    });
                                }


                                jQuery('#mycarousel')
                                        .jcarousel(
                                                {
                                                    auto : 2,
                                                    scroll : 1,
                                                    wrap : 'last',
                                                    initCallback : mycarousel_initCallback,
                                                    itemFallbackDimension: 300,
                                                    //size: mycarousel_itemList.length, 
                                                    itemFirstInCallback:mycarousel_itemFirstInCallback 
                                                   // itemLoadCallback: {onBeforeAnimation: 
                                            //mycarousel_itemLoadCallback} 

                                                });// carousel
                            });

                  $(".jcarousel-prev")
                    .after(
                            "<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
                  function display(s) { 
                     $('#myHeader').html(s); 
                    }; 

                    function mycarousel_itemFirstInCallback(carousel, item, idx, state) { 
                        display( idx +"<i> of </i>"+ $("#mycarousel li").length); 
                    };