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