I'm using jcarousellite for a simple JQuery carousel, but I would like to alter it a bit so that images are hidden for the items to the far left and the far right, but shown on the middle items.
To do this though I need to be able to find which list items are being displayed in the view port at any one time. I've tried digging around in the source code and using the included callbacks, but I can't ever get index numbers which tally with the item being shown.
Does anyone have any experience of this or ideas on how to solve it?
EDIT
OK solved this to some extent, but it's still not working correctly. The afterEnd function is built into the plugin and provides an object of the currently visible items. I've used this to provide the IDs of the list elements, and apply some transitions.
The problem is that this is all "outside" of the plugin, so if I enable auto scrolling, all this code is ignored. I need some way of inserting this code into the functions within the plugin, and that's where I'm a bit stuck I'm afraid.
$(".ccvi-carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 800,
//auto: 2000,
afterEnd: function(a) {
if (start=true) {
$('li#1 .cf-img').hide();
}
left = $(a[0]).attr("id");
mid = $(a[1]).attr("id");
right = $(a[2]).attr("id");
$('.prev').click(function() {
$('li#' + left + ' .cf-img').fadeIn();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').hide();
});
$('.next').click(function() {
$('li#' + left + ' .cf-img').hide();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').fadeIn();
});
//alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
}
});
I think this is the function within the plugin that I need to get my code into, but I can't see how it works.
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
//alert (curr);
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
//alert (curr);
} else {
curr = to;
//alert (curr);
}
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
//alert (curr-2);
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
