默认情况下隐藏叠加层时，jquery库不可见(jquery gallery not visible when overlay is hidden by default)

 我有一个jquery库，它放在全屏绝对定位元素的内部，默认情况下，该元素用display: none隐藏，直到你单击一个按钮，然后该元素显示为jquery .show() 。 问题是，当我单击一个按钮时，会显示该全屏元素，但该元素（jquery库）中的所有内容都不可见。 仅显示全屏元素。 当我删除全屏元素的显示无（因此在加载时显示）时，可以看到图库（或内容）。 此外，在默认情况下隐藏它并且仅显示全屏元素而不显示内部元素（图库）的情况下，当我调整浏览器大小时，会显示图库？ 
 
 演示： http ： //codepen.io/riogrande/pen/WxxjvJ 
 
 HTML 
 
<div class="gallery">
    <div class="demo">
        <ul id="lightSlider">
            <li data-thumb="static/images/galerija/thumbs/15.jpg">
                <img src="static/images/galerija/15.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/16.jpg">
                <img src="static/images/galerija/16.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/17.jpg">
                <img src="static/images/galerija/17.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/18.jpg">
                <img src="static/images/galerija/18.jpg" alt="galerija"/>
            </li>
        </ul>
    </div>
    <div class="close-gallery">
        <img src="static/images/close.png" alt="close"> Zatvori galeriju
    </div>
</div>
 
 CSS 
 
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;
    }
  }
}
 
 JQUERY（SLIDER是LightSlider） 
 
$(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();
    });
 
 因此，当我单击打开图库时，仅显示叠加，全屏元素 
 
  
 
 当我调整画廊大小时显示？ 
 
  
 
 当我从CSS中删除显示块时（因此始终显示全屏），库正常加载 
 
  
 
 演示： http ： //codepen.io/riogrande/pen/WxxjvJ 

I have a jquery gallery which is placed inside of full screen absolutely positioned element and by default that element is hidden with display: none until you click a button and then that element is shown with jquery .show(). 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? 
 
DEMO: http://codepen.io/riogrande/pen/WxxjvJ
 
HTML 
 
<div class="gallery">
    <div class="demo">
        <ul id="lightSlider">
            <li data-thumb="static/images/galerija/thumbs/15.jpg">
                <img src="static/images/galerija/15.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/16.jpg">
                <img src="static/images/galerija/16.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/17.jpg">
                <img src="static/images/galerija/17.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/18.jpg">
                <img src="static/images/galerija/18.jpg" alt="galerija"/>
            </li>
        </ul>
    </div>
    <div class="close-gallery">
        <img src="static/images/close.png" alt="close"> Zatvori galeriju
    </div>
</div>
 
CSS
 
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;
    }
  }
}
 
JQUERY (THE SLIDER IS LightSlider) 
 
$(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();
    });
 
So when i click to open a gallery, only the overlay, fullscreen element is displayed
 
 
When i resize the gallery is shown??
 
 
When i remove the display block from CSS (so the fullscreen is shown all time) the gallery is loaded normally
 
 
DEMO: http://codepen.io/riogrande/pen/WxxjvJ

原文：https://stackoverflow.com/questions/37845101