CODEWITHSUNDEEP
javascriptjqueryhtmlcss
riogrande
riogrande

Reputation: 349

jquery gallery not visible when overlay is hidden by default

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

only overlay is displayed

When i resize the gallery is shown??

after resize gallery appears

When i remove the display block from CSS (so the fullscreen is shown all time) the gallery is loaded normally

enter image description here

DEMO: http://codepen.io/riogrande/pen/WxxjvJ

Upvotes: 0

Views: 556

Answers (1)

Jakob
Jakob

Reputation: 3546

You could do just one overlay <div> and change background, z-index and content of it on click, with toggleClass for example.

I changed your code a bit so here you have working example http://codepen.io/anon/pen/vKKJEq

Upvotes: 1

Related Questions