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,
I added this JS to make them functional without conflict:
<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:
<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:
And finally here is a working example of a single Jcarousel with external controls for reference:
http://dl.dropbox.com/u/4138955/drop3d/test/js_carousel_single_working.html
Hope you can help me out, this is very important for me.
Regards,
Manuel