Проблема с Lightbox-plus-jquery: открытие выбранного изображения в слайдере вместо последнего изображения

Question

У меня возникла проблема с библиотекой Lightbox-plus-jquery. В настоящее время, когда я нажимаю на изображение в слайдере, лайтбокс открывает последнее изображение в группе вместо изображения, на которое я щелкнул. Моя цель — обеспечить, чтобы в лайтбоксе открывалось изображение, соответствующее изображению, по которому щелкнули в слайдере.

Может ли кто-нибудь дать рекомендации о том, как изменить этот код, чтобы при нажатии на изображение в слайдере в лайтбоксе открывалось соответствующее изображение, а не последнее изображение в группе?

Я ценю любые идеи или советы по решению этой проблемы.

ЯС:

      var images = document.querySelectorAll('.SlideshowImage');
var currentIndex = 0;

images[currentIndex].classList.add('active');

function updateSlide() {
    var currentImage = images[currentIndex];
    var nextIndex = (currentIndex + 1) % images.length;
    var nextImage = images[nextIndex];

    currentImage.style.opacity = '0';
    nextImage.style.opacity = '1';

    currentIndex = nextIndex;
}

function openImage(event) {
    event.preventDefault(); 
    var clickedImage = event.currentTarget;
    var index = parseInt(clickedImage.getAttribute('data-index'));

    if (!isNaN(index)) {
        // Open the clicked image using lightbox logic here
    }
}

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', openImage);
}

setInterval(updateSlide, 2000); // Change slide every 2 seconds

HTML:

      <div class="Box2 SlideshowContainer">
    <a href="Slike/Slika (3).jpg" data-lightbox="gallery" class="SlideshowImage">
        <img src="Slike/Slika (3).jpg" id="Slika">
    </a>
    <a href="Slike/Slika (4).jpg" data-lightbox="gallery" class="SlideshowImage">
        <img src="Slike/Slika (4).jpg" id="Slika">
    </a>
        <!-- More images -->
</div>