Hello I will like to ask your help to make two "jcarrousels" work with external controls. I am not very JS savy but I think this might be an easy fix, although I am not sure how to figure it out. Thanks for your time.

I removed the default controls (arrows) and will like to use the external controls (black arrows) to slide the thumbnails.

This is a test page with two carrousels,

Double Carousel

I added this JS to make them functional without conflict:
Code JavaScript:
<script type="text/javascript">
 
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.first-and-second-carousel').jcarousel();
 
	// If you want to use a caoursel with different configuration options,
	// you have to initialise it seperately.
	// We do it by an id selector here.
 
});
 
 
</script>


Then looked around for a solution and I found this thread:
[jQuery] Multiple external controls... - jQuery Forum

using this JS:
Code JavaScript:
<script type="text/javascript">
function mycarousel_initCallback1(carousel) {
jQuery('.jcarousel-control1 a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll1 select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options
[this.selectedIndex].value);
return false;
});
};
function mycarousel_initCallback2(carousel) {
jQuery('.jcarousel-control2 a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll2 select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options
[this.selectedIndex].value);
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#first-carousel").jcarousel({
scroll: 5,
visible: 5,
wrap: "both",
buttonNextHTML: 0,
buttonPrevHTML: 0,
initCallback: mycarousel_initCallback1,
});
jQuery("#second-carousel").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback2,
});
});
</script>


Looks like the solution is there but I think I applied it incorrectly, basically what I did was to copy that script and change the "#idselector" names to match the ones on my example, but this still not working. So here is where I will like some help. (also I tried removing the script mentioned earlier to start up both carousels, and also having both scripts together, but still not working)

Link to example:


Double Carousel


And finally here is a working example of a single Jcarousel with external controls for reference:


http://dl.dropbox.com/u/4138955/drop...e_working.html


Hope you can help me out, this is very important for me.

Regards,


Manuel