So I worked on this a little more and almost have it working how I want.
I have it set up so when a user click on a link in the thumbnail list, it should center that thumb it if it's not that first 3 or the last 3 items. I set the event to click, yet for some reason it is only working correctly if you double click the linked thumbnail image.
Here is the code I have for the scrolling:
$('#mycarousel li a').each(function(idx) {
$(this).data('index', (++idx));
});
//jCarousel
$('#mycarousel').jcarousel({
scroll: 5,
visible: 5,
initCallback: initCallbackFunction
});
function initCallbackFunction(carousel) {
$('#mycarousel li a').each(function() {
$(this).click(function() {
var idx = $('#mycarousel li a.activeSlide').data('index') - 2;
carousel.scroll(idx);
return true;
});
});
};
Please take a look at my demo to see whats going on. I works exactly like I want it to yet it is taking two clicks on a thumb to get it to center the right way, rather than just one.
Demo:
http://www.webphibian.com/standards/slideshows/jslideshow-test.phpAny ideas?