jCarouselLite - height?

Question

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 show all types of texts, no matter how many lines there is - any ideas?

Answer 1

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.

Answer 2

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.