jCarousel and using Images as External Controls

The alt tag is the alternate text the describes the image, the class tag adds classes to object, so I'm not quite sure which one you mean.

Assuming you mean that the external control images have classes associated with them, and the class 'p1' is for the first image and 'p2' is for the second etc... I'll try to explain.

First off I'll explain this line a little clearer:

carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

If I had clicked on the second control, i.e. the number 2, the above line evalates to: carousel.scroll(2); i.e. scroll the carousel to the second image. What we have to do is emulate that behaviour, so when a click is detected on the second image in the external controls, we need the function to find the integer value 2. Assuming, as I said above, that you have a class that incrementally increases based on the position in the carousel it represents, i.e. first image, the class = p1, second image the class = p2 and so on. We need to check the clicked image for that class, and return an integer value that matches that.

Pseudo-code:

Second image clicked
    Check class
    If class p2
         return 2

or a more general version of pseudo-code:

image clicked
    switch class
         p1: return 1
         p2: return 2
         p3: return 3
    end

The javascript would look something like the following (I haven't tested this at all):

carousel.scroll(function() {
    if (jQuery(this).hasclass("p1")) { return 1; }
    if (jQuery(this).hasclass("p2")) { return 2; }
    if (jQuery(this).hasclass("p3")) { return 3; }
});

It's not a great solution, since you can't have an arbitrary number of images in your carousel, and I'm sure there is a cleaner solution you could use, but it's early on a Saturday morning.