How can I get the visible item in jCarouselLite?

Question

I am using the jCarouselLite plugin for my site. It works very nice. I wanted to add some bullets also at the bottom of the images (not only arrows) as external controls. So by clicking the second bullets it will go to the second image. This works also fine using the btnGo the plugin provides.

What I also want to do is to change the bullet, looking as active based on which image I see every time. So when I click the next arrow and I see the second image I want immediately the second bullet to be active. For doing this I want to know the number of the image I see.

I know that through the afterEnd callback function I get the object that is active after the animation. Is there a way to get just the number of this object? For example if the object is the second image, to get only the number 2.

Does anyone know something about it?

Thanks in advance

Answer 1

Comment #315 on jCarousel Lite #All-Comments gave me this answer (which I just used) :

It's basically using string replacements to get the number of which control is "active" based on which similarly named image is about to show.

---

Assuming you have external controls with ids: “#pi1″, “#pi2″, “#pi3″, “#pi4″, “#pi5″, “#pi6″

And the images with ids of: “#im1″, “#im2″, “#im3″, “#im4″, “#im5″, “#im6″

Before you start the jCarousel Lite function, count the number of li’s:

var LiCount = $("#projectimage").find("ul").children("li").size();

Add the before start function:

beforeStart: function(a) {
 var imID = $(a).attr("id").replace('im','';
 var NimID = parseInt(imID);
 NimID++;
 if(NimID > LiCount) NimID = 1;
 $('#pi'+imID).removeClass('activelistlink');
 $('#pi'+NimID).addClass('activelistlink');
}