lightbox-plus-jquery问题：点击轮播图图片却打开组内最后一张

问题根源 #

你的轮播仅通过修改opacity切换图片，但所有图片在DOM中重叠排列，后添加的图片层级更高（z-index默认遵循DOM顺序）。即使设置opacity:0，元素依然能接收点击事件，导致你点击的看似是当前显示的图片，实际触发的是层级更高的最后一张图片的点击事件。另外，自定义的openImage函数阻止了lightbox的默认触发逻辑，进一步干扰了正常行为。

修改步骤 #

1. 修复轮播的层级与显示逻辑 #

修改updateSlide函数，切换时给当前显示的图片设置更高的z-index，确保它在最上层，同时重置其他图片的层级：

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

// 初始化第一张图的层级和激活状态
images[currentIndex].classList.add('active');
images[currentIndex].style.zIndex = 10;
images[currentIndex].style.opacity = '1';

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

    // 重置当前图片的状态
    currentImage.style.opacity = '0';
    currentImage.style.zIndex = 1;
    currentImage.classList.remove('active');

    // 设置下一张图片的状态
    nextImage.style.opacity = '1';
    nextImage.style.zIndex = 10;
    nextImage.classList.add('active');

    currentIndex = nextIndex;
}

2. 移除干扰lightbox的自定义事件 #

lightbox-plus-jquery会自动监听带有data-lightbox属性的<a>标签点击事件，无需自定义点击逻辑。删除以下代码：

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);
}

3. 修复HTML的重复ID问题 #

ID必须唯一，把重复的id="Slika"改成唯一标识：

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

4. 补充CSS确保轮播容器定位 #

给轮播容器添加相对定位，让图片的层级设置生效：

.SlideshowContainer {
    position: relative;
    /* 根据需求设置容器宽高 */
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.SlideshowImage {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease; /* 可选：添加过渡动画 */
    width: 100%;
    height: 100%;
}

修改完成后，当前显示的图片会处于最高层级，点击时会正确触发对应图片的lightbox事件，打开你点击的目标图片。

内容的提问来源于stack exchange，提问作者Marko Vrtaric