title: jquery gallery not visible when overlay is hidden by default
body: <p>I have a jquery gallery which is placed inside of full screen absolutely positioned element and by default that element is hidden with <code>display: none</code> until you click a button and then that element is shown with jquery <code>.show()</code>. The problem is that when I click on a button, that fullscreen element is shown but everything inside that element (jquery gallery) is not visible. Only the fullscreen element is shown. When i remove the display none for the fullscreen element (so its shown on load) the gallery (or the content) is visible. Also in the case when its hidden by default and displays only the fullscreen element and not what is inside of it (gallery) when i resize the browser the gallery is shown? </p>
  
  <p>DEMO: <a href="http://codepen.io/riogrande/pen/WxxjvJ" rel="nofollow noreferrer">http://codepen.io/riogrande/pen/WxxjvJ</a></p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="gallery"&gt;
      &lt;div class="demo"&gt;
          &lt;ul id="lightSlider"&gt;
              &lt;li data-thumb="static/images/galerija/thumbs/15.jpg"&gt;
                  &lt;img src="static/images/galerija/15.jpg" alt="galerija"/&gt;
              &lt;/li&gt;
              &lt;li data-thumb="static/images/galerija/thumbs/16.jpg"&gt;
                  &lt;img src="static/images/galerija/16.jpg" alt="galerija"/&gt;
              &lt;/li&gt;
              &lt;li data-thumb="static/images/galerija/thumbs/17.jpg"&gt;
                  &lt;img src="static/images/galerija/17.jpg" alt="galerija"/&gt;
              &lt;/li&gt;
              &lt;li data-thumb="static/images/galerija/thumbs/18.jpg"&gt;
                  &lt;img src="static/images/galerija/18.jpg" alt="galerija"/&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="close-gallery"&gt;
          &lt;img src="static/images/close.png" alt="close"&gt; Zatvori galeriju
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>gallery {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #2a2d2c;
    z-index: 99999;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    .close-gallery {
      position: absolute;
      right: 5%;
      top: 5%;
      z-index: 1000;
      cursor: pointer;
      color: white;
      font-size: 1.2rem;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
  </code></pre>
  
  <p>JQUERY (THE SLIDER IS LightSlider) </p>
  
  <pre><code>$(document).ready(function () {
          $('#lightSlider').lightSlider({
              gallery: true,
              item: 1,
              loop: true,
              slideMargin: 0,
              thumbItem: 9
          });
      });
  
      $('.galerija-gumb').click(function () {
          $('.gallery').show();
          $('body').scrollTop(0);
      });
  
      $('.close-gallery').click(function () {
          $('.gallery').hide();
          var slider = $('#lightslider').lightSlider();
      });
  </code></pre>
  
  <p>So when i click to open a gallery, only the overlay, fullscreen element is displayed</p>
  
  <p><a href="https://i.stack.imgur.com/3sRbH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3sRbH.png" alt="only overlay is displayed"></a></p>
  
  <p>When i resize the gallery is shown??</p>
  
  <p><a href="https://i.stack.imgur.com/2Qple.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Qple.png" alt="after resize gallery appears"></a></p>
  
  <p>When i remove the display block from CSS (so the fullscreen is shown all time) the gallery is loaded normally</p>
  
  <p><a href="https://i.stack.imgur.com/2yYfz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2yYfz.png" alt="enter image description here"></a></p>
  
  <p>DEMO: <a href="http://codepen.io/riogrande/pen/WxxjvJ" rel="nofollow noreferrer">http://codepen.io/riogrande/pen/WxxjvJ</a></p>