Black screen image not showing

[Steveb599]

Description

When clicking on image it does not show the image itself only a black screen overlay.

    <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">

    <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,
        licenseKey: "0000-0000-000-0000",
        plugins: [ lgThumbnail, lgAutoplay],
      })
    </script>

Sample HTML markup

       <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>

Environment

• Browser and version - Chrome
• OS - Windows
• lightGallery version - 2.7.2

Additional context

[Steveb599]

Found the issue. the library does not suuport RTL, the html file is rtl.

adding css property

.lg-container{
  direction: ltr;
}

fixed the issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.