Posted by scrypter on October 22, 2009 at 9:53pm
Jump to:
| Project: | jCarousel |
| Version: | 6.x-1.1 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
The carousel works fine except when there are two items and scroll by 1. Clicking next when first displayed does nothing, then the next click advances to item 2. No amount of clicking next will get it to wrap back to item 1. If I add a third item all is good. I have no prev button. Have tried wrap set to last and both, no diff. I put an alert in the js and it appears to be calculating the pos incorrectly in the pos method. This is used by animate to set the css left on the ul to give the effect of horizontal scrolling.
Anyone else seen this, or know of a fix?
Comments
#1
Fixed by getting the css widths of jcarousel containers exactly right. The left position has to be calculated in multilples of the item width and any discrepancy causes strife.
As an aside, I managed to get jcarousel working inside quicktabs. jcarousel won't calculate widths of hidden divs etc so i made a hack for jcarousel.js to use the css widths instead of offsetWidth so it sets up everything up OK even for the hidden carousels. Happy to provide if anyone is desparate.
#2
I'm very interested in those changes! Very frustrating experience getting jcarousel into quicktabs.
#3
In jcarousel/lib/jcarousel.jquery.js at around line 805, I made these changes:-
dimension: function(e, d) {var el = e.jquery != undefined ? e[0] : e;
// patch, items have zero offsetWidth if in hidden div part of quicktabs
var width = el.offsetWidth;
if (width == 0) {
var px = $(el).css('width').indexOf('px');
if (px > -1) {
width = parseInt($(el).css('width').substring(0, px));
}
}
// alert(el.parentNode.id + ' ' + el.className + ' ' + $(el).css('width') + ' ' + width); //el.offsetWidth is 0
var old = !this.options.vertical ?
// el.offsetWidth + $jc.margin(el, 'marginLeft') + $jc.margin(el, 'marginRight') :
width + $jc.margin(el, 'marginLeft') + $jc.margin(el, 'marginRight') :
el.offsetHeight + $jc.margin(el, 'marginTop') + $jc.margin(el, 'marginBottom');
In quicktabs, I think you have to have ajax loading turned off. Yes, agree on frustration factor, hence this desparate "fix".
#4
Most likely this has been fixed in newer versions of the jCarousel JS library which is included in the 2.x version of the jCarousel module. If it's not corrected, we'll need to collaborate a fix for this in the jCarousel library. As is, I'm closing this issue after a lack of activity.