lightbox does not work properly

Question

I need to show a lightbox by clicking on a link. The issue is once the lightbox is shown I should click on the lightbox buttons or change the screen-size to see the images. It seems like the images wont get loaded once the link is clicked.

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>slick - the last carousel you'll ever need</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css">
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/prism.css" />

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
  <style>
#pageOverLay {
  background: #fff none repeat scroll 0 0;
  margin-left: 43%;
  margin-top: 10%;
  position: absolute;
  width: 500px;
  z-index: 1001;
  display:none;
}
#pageOverLay-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    display: none;
}
#pageOverLayCloseBtn{
    position:absolute;
    top:0;
    right:0;
}
.slick-slider {
    margin: 30px auto 50px;
}
.slick-slider {
    -moz-user-select: none;
    box-sizing: border-box;
    display: block;
    position: relative;
}
</style>
</head>
<body>
 <a onclick="showLightBox();" href="#">Click Here to show lightbox</a>
        <div id="pageOverLay-shadow"></div>
        <div id="pageOverLay">
       <div id="pageOverLayCloseBtn"><a href="#" onclick="pageOverLayClose();">X</a></div>
        <h2>Images</h2>
        <div class="slider fade">
          <div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg"/></div></div>
          <div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg"/></div></div>
          <div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg"/></div></div>
        </div>
        </div>




    <script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"></script>
    <script type="text/javascript">

    function showLightBox(){
            $("#pageOverLay-shadow").css("display","block");
            $("#pageOverLay").css("display","block");

        }

        function pageOverLayClose(){
            $("#pageOverLay-shadow").css("display","none");
            $("#pageOverLay").css("display","none");
        }
        var disqus_shortname = 'slickcarousel';

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>

</body>
</html>

I suggest you use jsfiddle snipplet to help people to help you — Seng Zhe, Aug 14 '15 at 06:00
Try this one: http://jsfiddle.net/dm3Lea95/2/; added $("#openLB").on("mousedown","",showLightBox); and — Bjoerg, Aug 14 '15 at 06:19
@Bjoerg appreciate that. I do not get why it was not working? what was the issue? — Jack, Aug 14 '15 at 06:23
If you use chrome and open the console (F12 key) it says "Uncaught ReferenceError: showLightBox is not defined" when clicking on the link. I think jsfiddle have the functions inside the some other elements, this is why it is not global and not visible by the onclick call. There is still an error in your function at the bottom: "Uncaught TypeError: Cannot read property 'appendChild' of null" — Bjoerg, Aug 14 '15 at 06:36
https://github.com/kenwheeler/slick/issues/1573 -- Contents will be gone when a container element is hidden at start #1573 — Clayton Leis, Aug 14 '15 at 07:09

score 1 · Accepted Answer · edited May 23 '17 at 12:22

The css-attribute display:none; on div does the browser prevent from render or even load the image inside that element. There is a good explanation: Does “display:none” prevent an image from loading?

Just exchange "display: none;" with "visibility:hidden;" and update your JavaScript -> see below.

CSS:

#pageOverLay {
    background: #fff none repeat scroll 0 0;
    margin-left: 43%;
    margin-top: 10%;
    position: absolute;
    width: 500px;
    z-index: 1001;
    visibility:hidden;
}
#pageOverLay-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    visibility: hidden;
}

JS/jQuery:

...
function showLightBox() {
     $("#pageOverLay-shadow").css("visibility", "visible");
     $("#pageOverLay").css("visibility", "visible");
 }
...

I updated the jsfiddle: http://jsfiddle.net/dm3Lea95/4/ (fixed also the "close" button ;))

lightbox does not work properly

Demo

1 Answers1