Dimensions of Multiple Carousels and Image Center-Alignment

[jrcarazzone]

I have multiple responsive carousels on a single page, with images of different proportions in them. I have removed the width reduction in the JavaScript so that only one

element appears at a time. I would like to center the images as they appear in each carousel and have done so by putting a div around the image, using JavaScript to make the div's width and height equal to the carousel, and applying CSS {display: table-cell; vertical-align: middle} (and maybe text-align:center).

The JavaScript I used to size the div is something like $(".jcarousel ul li div).css("height",carousel.height()). (Sorry, I'm writing this from memory.)

The problem is that the same dimensions are set for all the carousels, and some end up being too large for their images. Is there a way to individually tailor the divs for each carousel, so that they are not all governed by the largest image on the page?

[jrcarazzone]

The bullet in the message above was meant to be "li" .

[jsor]

You need to be more specific in your selectors. .jcarousel ul li div selects all elements in arbitrary depth. You need to select elements per carousel and ensure you're selecting only the items of that instance. Something like

carousel.find('> ul > li div').css("height",carousel.height())

[jrcarazzone]

Thank you for the excellent advice. I will give it a try and let you know the outcome soon.

Sincerely, Reid

On Sep 6, 2016, at 1:09 AM, Jan Sorgalla notifications@github.com wrote:

You need to be more specific in your selectors. .jcarousel ul li div selects all elements in arbitrary depth. You need to select elements per carousel and ensure you're selecting only the items of that instance. Something like

carousel.find('> ul > li div').css("height",carousel.height()) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[jrcarazzone]

The code you recommended works. I now have a different problem: if I change the browser window width back and forth, the height of my carousels keeps growing, never shrinking back down to be close to the images. I put a CSS max-height on all carousel items to keep them from getting too large.

[jsor]

Hard to say without seeing the code. Could you setup a reproducible test case somewhere, eg. on jsfiddle?

[jrcarazzone]

I have started a test case at https://jsfiddle.net/evxeq195/8/

I am sorry but I do not know how to correctly access your js files through fiddle.

[jrcarazzone]

Updated with "text-align:center" for the image-centering effect.

https://jsfiddle.net/evxeq195/9/

[jsor]

I've updated the jsfiddle: https://jsfiddle.net/evxeq195/12/

You need to reset the heights of the images to auto to avoid spanning the heights of the outer elements.

[jrcarazzone]

I have followed your advice, but I still can't keep the heights tame unless I include a subtraction of 2:

var height = carousel.innerHeight() - 2 .

Then they remain well-behaved. The website I'm working on is: http://barnharteng.us/hike-bike.html (I am using Google Chrome for development.)

Another question: when the page first loads without a previous image cache, the div's inside the carousels don't adjust their heights to fill the space. How to force the carousel to refresh the div heights? Currently I have "jcarousel.on('jcarousel:scroll', function ()" to force height adjustment upon clicking a scroll arrow, but it would be nice if the div would refresh its height once the images have all loaded.

Also, I greatly appreciate your product. I am sorry if I should know this, but what is the right way to reference your work?

[jsor]

You need to reload the carousel ($('.jcarousel').jcarousel('reload');) either on window load or use something like imagesloaded.

[jrcarazzone]

Placing the following code after the $(function()) block did the trick:

$(window).load(function(){ $('.jcarousel').jcarousel('reload'); });

Thank you very much for your help. I think that answers all my questions for now.

On 9/26/2016 1:04 AM, Jan Sorgalla wrote:

You need to reload the carousel (|$('.jcarousel').jcarousel('reload');|) either on window load or use something like imagesloaded https://github.com/desandro/imagesloaded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jsor/jcarousel/issues/808#issuecomment-249486154, or mute the thread https://github.com/notifications/unsubscribe-auth/AU9Q9ii4c-VQ6GDoCl2DcEjdzTkMOUlDks5qt2BfgaJpZM4J0Yuh.