Open Steveb599 opened 2 months ago
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>
<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>
Found the issue. the library does not suuport RTL, the html file is rtl.
adding css property
.lg-container{ direction: ltr; }
fixed the issue
Description
When clicking on image it does not show the image itself only a black screen overlay.
Sample HTML markup
Environment
Additional context