How to hide Galleria's data-layer?

Question

I installed the galleria plugin and added a data-layer so you can see a description to the photo. My problem is that I want the layer to be hidden by default (display: none) but there is a style in the div of the layer:

<div class="galleria-layer" style="position: absolute; z-index: 2; display: block; top: 0px; left: 0px;">Frau Maxl wollte nicht unbedingt Fotografiert sein. Ich habe ein paar stunden erlaubt aber die zwei wollte den ganzen tag nehmen.</div>

This "display: block" is the problem. If I set it to "display: none !important" the div is hidden but it will stay hidden. I want to toggle it with jQuery. A normal "display: none" is useless 'cause it has a lower priority than the styles in the div. This div is also generated on the fly and so it is even more difficult to change it.

Is there anyone who has an idea where these styles come from? I haven't found anything in gallerias JS and CSS.

Answer 1

I think, Galleria js handle the show and hide of that div's so if you want always hide works with !important

Why not add another class with "display : none !important"? this way overrides the original and let you change dynamically with jquery with addClass, toggleClass and removeClass statements

.myHideClass{
     display:none !important;
}

so... how do I put the class on the div by default?

<script>

    // Load the classic theme
    Galleria.loadTheme('galleria.classic.min.js');

    // Initialize Galleria
    Galleria.run('#galleria');

    //the divs are already created so...
    $('.galleria-layer').addClass("myHideClass")

</script>