jCarouselLite - height?

I am using the jCarouselLite jquery plugin to a simple rotate where an image+text is displayed on at a time, with a prev+next button. My problem is that jCarouselLite seems to be inserting a set height for all the elements. My need is that all my pictures are of the same height, but the amount of text can differ - currently jCarouselLite cuts of/hides the text where the are many lines. I want to be able to sh开发者_开发问答ow all types of texts, no matter how many lines there is - any ideas?

I know this is an old post, but this is how I sorted out the problem. It's applicable to version 1.0.1 of the carousellite.js code.

The issue is the height for the container is set by the first element, rather than iterating through all of the items to find the largest. I adjusted the code accordingly as follows.

First, add a new function to the script called max_height:

function max_height(el) {
    // Adapted 25/09/2011 - Tony Bolton - Return height of the largest item..
    var _height = 0;

    $.each(el,function() {
        var _compHeight = $(this).height();

        if (_compHeight > _height) {
           _height = _compHeight;
        }
    });

    return parseInt(_height);
};

Now, look for the line of code where the list item height is set:

li.css({ width: li.width(), height: li.height() });

Change it to the following:

li.css({ width: li.width(), height: max_height(li) });

That should sort out the cropping issue. Incidentally this will only work if you initialise the carousel in the window.load event, otherwise the dom won't know how high the container is.

I'd like to clarify Tony's excellent answer slightly. Not only should the li.css line be modified to use his new function, but that line should also be moved up in the code. This is the original code:

var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

li.css({width: li.width(), height: li.height()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

This is the modified code:

li.css({width: li.width(),height: max_height(li)});

var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

This ensures that the animation accommodates the new list item height.

In the jCarouselLite Javascript file change the word 'hidden' to visible', that sorted for me..

Try setting the outer container (.jCarouselLite) to "overflow-x: visible;". If your carousel is vertical, just change it to overflow-y.

Add these five lines below var _compHeight = $(this).height(); in Tony's max_height() function so that margins are also considered:

var marginTopStr = $(this).css('marginTop');
var marginTop = parseInt(marginTopStr.substr(0, marginTopStr.length - 2));
var marginBottomStr = $(this).css('marginBottom');
var marginBottom = parseInt(marginBottomStr.substr(0, marginBottomStr.length - 2));
_compHeight += (marginTop + marginBottom);