Search code examples
jqueryjcarousel

Create a dynamic jcarousel that resizes vertically

I'm using the jcarousel library (http://sorgalla.com/projects/jcarousel/) and wanted to use the vertical carousel, but also make it dynamically resize based on the height of the browser window.

There was an example page that had a horizontal carousel that stretched/shrunk to fill the width and showed more/less items as a result.

http://sorgalla.com/projects/jcarousel/examples/static_callbacks.html

I took that example page and modified it to make it a vertical carousel and set the height's instead of widths to be %. Here is the modified page:

http://www.strangeport.com/jcarousel/static_callbacks.html

Unfortunately all it does is create a carousel that stretches to show all items in it and causes the browser to scroll.

I am new to JQuery so been trying to debug this with firebug - but having difficulties figuring out what is wrong. Any help someone can offer would be greatly appreciated. Thanks!

EDIT: Thanks to Marcus' solution, this is what I did to fix it (I edited this to include the fix code in a more readable format:

fyi to anyone else looking to use this for Jcarousel (I used this in a page-resize and document ready function).

var galleryHeight = $(window).height() - 170; // just arbitrary offset for testing
$('.jcarousel-container-vertical').css('height', galleryHeight); 
$('.jcarousel-clip-vertical').css('height', galleryHeight);

The jcarousel needs to have the container and the clip-container's height's set.

Solution

  • You can use the jQuery's .css() method to dynamically resize the gallery container. You would do something like the following:

    $('#myGalleryContainer').css('height', galleryHeight);