ansaurus

Question

Getting Index of Current Item in JCarousel

Answer 1

A:

I found this method of highlighting the jcarousel controller that my contain the answer.

jjclarkson 2009-08-25 15:58:02

Answer 2

A:

It doesn't seem as obvious as I would have hoped from a jQuery plugin to be honest. There are two callbacks itemVisibleInCallback and itemVisibleOutCallback, but they're only going to be useful if you're only displaying one image at a time.

To be honest, as much as I hate to send you down a totally different path, I would highly recommend using the cycle plugin for carousel work as it allows much, much finer customisation that would I could see from my quick look through the jCarousel (sorry jCarousel author - the code itself looks brilliant!).

Steerpike 2009-08-25 16:10:30

Answer 3

A:

I think what you are looking for is carousel.first, which will give you the index of the first visible element (there is also carousel.last to show the last visible element).

Here is an example of it's use, based on the simple carousel example with the addition of the carousel.first variable and itemLoadCallback event:

<script type="text/javascript">
$(document).ready(function() {
    $('#mycarousel').jcarousel({
     itemLoadCallback: trigger
    });
});

function trigger(carousel, state)
{
    $("#currentImg").html(carousel.first);  
}

</script>

</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Simple carousel</h3>
  <p>
    This is the most simple usage of the carousel with no configuration options.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

  Current Photo <span id="currentImg">1</span>

</div>
</body>

HenryRat 2009-08-25 16:10:46

I thought that to at first, but first and last don't work when more than one image is visible as the first visible image and the last visible image is not always the current image...

Steerpike 2009-08-25 16:26:34

Sorry I'm not fully understanding what you are saying? Using jcarousel's simple example, which uses three images and scrolls horizontally, carousel.first will return the left-most element and carousel.last will return the right-most element. On each press of the left and right arrows to perform the next and previous operations the itemLoadCallback event is triggered passing the carousel data enabling you to check the first and last elements. And whichever you consider to be the current one you can display, if you consider the middle to be current then use these to determine the middle index.

HenryRat 2009-08-25 16:36:22

Thank you... this helped a lot.

Anthony Walsh 2009-09-05 01:49:46

ansaurus

tags:

views:

answers:

Getting Index of Current Item in JCarousel

related questions