jsor/jcarousel — Issue #263: Carousel doesn't work in a "display: none" slide panel
Author: graphicfighter
Created: 2011-10-29 18:07:01+00:00
State: open

Hi everyone,

I'm trying to get jcarousel to work in a website that uses a base of jquery simple slide panel (see ex. here: http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html).

Here's a screenshot of the step in my website (sorry for the mosaic, it's a business project I'm not supposed to disclose yet) I'm having issues with:
http://img339.imageshack.us/img339/4510/screenico.jpg

I've read around enough to identify my problem: the panel/div that the carousel is into is by default set to "display:none" (there is no vertical left panel showing when you land on the homepage, they only appear one at a time and always in the same place as you click on the top menu). I read that the carousel cannot have access to the appropriate dimensions when it's hidden on initialization, thus having the pictures in the carousel stacking vertically, although I can still scroll left and right (self explanatory in my screenshot, I've set the height higher on purpose so that it can be seen).

My question is: is there a simple way to work this around and get the carousel to load before it's being hidden by the slide panel stylesheet?

If it's of any help, this is the function I'm using for the multiple slide panels:

$(document).ready(function(){
$(".btn-slide").click(function(){
var parentID = $(this).parent().attr("id");
var panelID = "#panel"+parentID.substr(5);
if ($('.panel:visible:not("'+panelID+'")').length) {
// another, different panel needs to be shown
$('.panel:visible').slideUp("slow", function(){
$('#slide'+$(this).attr("id").substr(5)+' a').toggleClass("active");
$(panelID).slideDown("slow", function(){
$('#slide'+$(this).attr("id").substr(5)+' a').toggleClass("active");
});
});
} else {
if ($(panelID+':visible').length) {
// panel is already visible - close it
$(panelID).slideUp("slow", function(){
$('#slide'+$(this).attr("id").substr(5)+' a').toggleClass("active");
});
} else {
$(panelID).slideDown("slow");
$(this).toggleClass("active");
}
}
return false;
});
});

I'm a dummy when it comes to adding javascript functions so if you guys have a solution, could you please tell me exactly how and where I should put it in my code?

Many many thanks!