CODEWITHSUNDEEP
javascripthtmljquerycsslightbox2
Marko Vrtaric
Marko Vrtaric

Reputation: 1

Issue with lightbox-plus-jquery: Opening Clicked Image in Slider Instead of Last Image

I'm facing an issue with the lightbox-plus-jquery library. Currently, when I click on an image in the slider, the lightbox opens the last image in the group instead of the image I clicked on. My goal is to ensure that the lightbox opens the image that corresponds to the clicked image in the slider.

Could anyone provide guidance on how to modify this code so that when I click on an image in the slider, the corresponding image is opened in the lightbox, rather than the last image in the group?

I appreciate any insights or advice on resolving this issue.

JS:

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>

Upvotes: 0

Views: 170

Answers (0)

Related Questions