jCarousel and using Images as External Controls

jCarousel is a fantastic addition to jQuery; it makes it very easy to set up a carousel of images, or indeed text, on your website. It is also a simple matter to add external controls to the system, that allow you to jump between the images and not just scroll: jCarousel external controls example

An issue that came up while putting in an image carousel on a website was how to use images as the external controls. The issue at hand basically arises from this one line:

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

This line tells the carousel to use the integer value of the text found at each line that matches the id of our controller as the identifier for where in the carousel that control will move us to. What that means is that the text value of each line has to be a number, usually starting at 1 and increasing, by 1 at a time up to the number of images found in the carousel.

With some relatively simple changes to this line, we can use images with a specific 'alt' attribute and our external controls will still work:

carousel.scroll(jQuery.jcarousel.intval(jQuery(this).find('img').attr("alt")));

Your images must be set up to have the numerical value that image will move the carousel to upon clicked, i.e. in most situations, the first image will have 'alt="1"', the second will be 'alt="2"', etc...

I know this explanation is weak at the moment, I will explain this better and in more detail at a later stage, but right now I have to get my Ph.D. finished. If it is unclear, leave a comment outlining what you don't understand and I'll try to explain.