Containing Galleria Gallery in a div set to display none

I've got a gallery in div which is initially set to display none, this is because I have 5 of these galleries on the same page and only want one to display at any one time. Now whenever i click the link to display one of t开发者_Go百科he galleries i'm getting a fatal error:

Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.

Is there anyway to work around this? My javascript knowledge isn't great, but any help would be greatly appreciated.

Thanks.

Joni

You need to intialize the gallery instance on whatever event it is that displays the gallery container.

I have been experiencing the same issue - my gallery is hidden (display none) by default on my page and only appears when you click a link "View gallery". Using jQuery slideDown (which sets the display property to block), only then do I call the initialize.

$("#gallery-wrapper").galleria({ height: 500, width: 500 });

Is this function

$(".portfolio-links a").click(function() {});

You may able to re-call

$(".gallery").galleria({
    width: 605,
    height: 550,
    autoplay: 3000,
    transition: 'fadeslide'
});

But maybe use unique ID's so you're not doing unneeded work

I would use javascript to hide the element after it obtains the height. The issue is that it cannot get the height of an element that is display:none; it's structure is like a ghost, intangible.

Also I am thinking the easiest thing you can do to fix your site is adding a rel tag to each link that is pertinent to the link such as rel="graphic" and rel="packaging" add a similar tag to each div that.

Use that to toggle the different galleries. Also you are targeting only one gallery with the jquery cycle plugin, I would suggest:

$('.portfolio-body').cycle({
    fx: 'scrollLeft',
    speed:   2000, 
    timeout: 3000, 
    next:   '#catalogue-display'
});

That way it targets all of them. Also the Galleria plugin seems to not work at least in the jsFiddle example. I would assume that it would conflict with the jQuery Cycle plugin.

I would also change the onClick handler to use the rel to know which gallery to display. And to hide the remaining using something as such.

$(".portfolio-links a").click(function() {
    $('.portfolio-body').hide();
    var rel = $(this).attr("rel");
    $('.portfolio-body[rel="'+rel+'"').show();
});

I know most of what I said is not too pertinent with your original question but I would start here it may fix your initial issue. Note: I did not run into the same error you described above