JCarouselLite - height?

Question

I use the jCarouselLite jQuery plugin to easily rotate where the image + text is displayed at the same time, with the prev + next button. My problem is that jCarouselLite seems to insert a set height for all elements. My need is that all my photos have the same height, but the amount of text may vary - currently jCarouselLite cuts / hides text where there are many lines. I want to be able to show all types of texts, no matter how many lines there are - any ideas?

Answer 1

I know this is an old post, but that’s how I dealt with the problem. It is applicable to version 1.0.1 of the carousellite.js code.

The problem is that the height for the container is set by the first element, and not by iterating all the elements to find the largest one. I adjusted the code 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 find the line of code where the height of the list item is set:

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

Change it to the following:

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

This should solve the cropping problem. By the way, this will only work if you initialize the carousel in the window.load event, otherwise dom will not know how tall the container is.

Answer 2

I want to clarify Tony a bit. Not only should the li.css line be modified to use its new function, but this line must also be moved in the code. This is the source 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 a 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 holds the new height of the list item.

Answer 3

In the jCarouselLite javascript file, change the word "hidden" to visible "which is sorted for me ..

Answer 4

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

Answer 5

Add these five lines below var _compHeight = $(this).height(); to the Tony max_height () function so that the fields are also taken into account:

 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);