I have an element and two different functions are assigned to it.
One calls for carousel.next() and another triggers a navigation link
to change class.
I need click to be disabled until both are complete. How can I achieve
that?
(I am talking about $('.carousel-next') element
Here is the code:
function mycarousel_initCallback(carousel) {
$('.navigation a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval($(this).text()));
$('.navigation .selected').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('.carousel-next').bind('click', function() {
carousel.next();
return false;
});
}
$(document).ready(function () {
// first carousel (coda)
$('.carousel-first').jcarousel({
visible: 1,
scroll: 1,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null,
wrap: 'both'
});
// second carousel (image)
$('.carousel-second').jcarousel({
visible: 1,
scroll: 1,
vertical:true,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null,
wrap: 'both',
animation:'slow'
});
// hacking navigation to follow 'next'
$('.navigation a:first').addClass('selected');
$('.carousel-next').click(function(){
if ($('.navigation li:has(.selected) + li').length!=0) {
$('.navigation li:has(.selected) + li')
.children()
.addClass('selected');
$('.navigation .selected:first').removeClass('selected'); }
else {
$('.navigation li:first')
.children()
.addClass('selected');
$('.navigation .selected:last').removeClass('selected');
}
});
});