Блог

Я работаю над веб-сайтом, и я следовал руководству по созданию галереи лайтбоксов. К сожалению, это частично работает, поскольку я создавал вкладки в год, и javascript выполняется только на первой вкладке, но не может на других. Вот мой js-код лайтбокса:

 const lightBoxContainer = document.querySelector(".lightbox");
const lightboxImage = document.querySelector(".lightbox-img");
const counter= document.querySelector(".lightbox-counter");
const prevButton= document.querySelector(".prev");
const nextButton= document.querySelector(".next");

// const lightboxText = document.querySelector(".lightbox-text");
const portfolioItems = document.querySelector(".portfolio-items").children;
let index;
let imgSrc;

// Close lightbox if click anywhere outside arrow
lightBoxContainer.addEventListener("click", function(event){
    if(event.target!==lightboxImage amp;amp; event.target!==prevButton amp;amp; event.target!==nextButton){
        lightBox();
    }
})

//on img click open img lightbox and changeimage information
for(let i=0; i<portfolioItems.length; i  ){
    portfolioItems[i].querySelector(".fa").addEventListener("click",function(){
        index=i;
        changeImage();
        lightBox();
    })
}


// change img index  1 -1
function next(){
    if(index==portfolioItems.length-1){
        index=0
    }
    else{
        index  ;
    }
    changeImage()
}

function prev(){
    if(index==0){
        index=portfolioItems.length-1;
    }
    else{
        index--;
    }
    changeImage()
}

// change img with arrow left/right
document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if  (e.keyCode == '37') {
       prev()
    }
    else if (e.keyCode == '39') {
      next()
    }
    else if (e.keyCode == '27') {
        lightBox()
      }

}

// change css properties to open img
function lightBox(){
    lightBoxContainer.classList.toggle("open");
}

//make the image change according to index and change mentions according to img

function changeImage(){
    imgSrc=portfolioItems[index].querySelector("img").getAttribute("src");
    lightboxImage.src=imgSrc;
    counter.innerHTML=(index 1)  " sur "   portfolioItems.length;
    // lightboxText.innerHTML=portfolioItems[index].querySelector("h2").innerHTML;
}
  

Вы можете просмотреть ошибку, о которой я говорю (перейдите в acrylique и сравните 2020 [рабочий] и 2019 [не рабочий] годы), посетив: Пример проблемы с лайтбоксом в реальном времени

Таким образом, у меня на моей консоли есть два следующих Uncaughterror: Uncaught SyntaxError: идентификатор ‘lightBoxContainer’ уже объявлен Uncaught SyntaxError: идентификатор ‘currentLocation’ уже объявлен

Как это исправить? Как я мог бы самостоятельно определить ошибку в следующий раз?

Большое вам спасибо за ваше время и помощь!