I'm experiencing an issue with a jQuery gallery placed within a full-screen absolutely positioned element that is initially hidden with display: none. When I click a button to reveal the element using jQuery .show(), only the full-screen overlay appears, not the gallery inside it. However, if I remove the initial display property, or resize the browser window, the gallery becomes visible. Here's a link to a demo showcasing the problem: http://codepen.io/riogrande/pen/WxxjvJ
Here's the HTML code snippet:
<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>
...
</ul>
</div>
<div class="close-gallery">
<img src="static/images/close.png" alt="close"> Close Gallery
</div>
</div>
The CSS styling for the gallery is as follows:
.gallery {
position: absolute;
width: 100%;
height: 100%;
background: #2a2d2c;
z-index: 99999;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
}
...
And here's the JavaScript/jQuery code used for the LightSlider gallery:
$(document).ready(function () {
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
});
$('.open-gallery-button').click(function () {
$('.gallery').show();
$('body').scrollTop(0);
});
$('.close-gallery').click(function () {
$('.gallery').hide();
var slider = $('#lightslider').lightSlider();
});
Despite clicking the open gallery button, only the overlay is displayed, as shown in the following image:
https://i.sstatic.net/3sRbH.png
However, upon resizing the browser window, the gallery content becomes visible:
https://i.sstatic.net/2Qple.png
If I remove the display property from the CSS altogether, the gallery functions as expected:
https://i.sstatic.net/2yYfz.png
For more details and to see the issue in action, check out the demo link: http://codepen.io/riogrande/pen/WxxjvJ