I am looking for a gallery that has thumbnails, is opened upon click on image and has captions. lightgalleryjs does meet my requirements, but it does not render the image. it shows black screen overlay instead, without the image above the overlay.

code:

inside head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css">

inside body:

       <div class="gallery1" id="gallery1">
    <a href="assets/images/events/IMG_2464.JPG" 
      >
      <img src="assets/images/events/IMG_2475.JPG" alt="">
    </a>

    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>

   </div>

at the bottom above body closing tag:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/share/lg-share.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/autoplay/lg-autoplay.min.js"></script>
<script>
  let gallery = document.getElementById("gallery1");
  lightGallery(gallery, {        
    controls: false,
    speed: 200,
    download: false,
    counter: false,
    plugins: [ lgThumbnail, lgAutoplay],
  })
</script>