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 = $(w开发者_如何学Goindow).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.
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);
精彩评论