Опция Image Click не работает с Vanilla Javascript; лайтбокс

Question

У меня проблемы с тем, чтобы сделать мои изображения кликабельными с помощью ванили javascript. Есть ли способ лучше? Кстати, я должен добавить, что после нескольких неудачных попыток создания галереи изображений Lightbox, это то, что я сделал. См. Код ниже.

CSS:

    .container {
        max-width: 1280px;
        padding: 10px 1rem;
        margin: auto;
        overflow: hidden;

    .main-img img,
    .imgs img {
        width: 100%;
    }

    .imgs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }

    .imgs img {
        cursor: pointer;
    }

    @keyframes fadeIn {
        to {
             opacity: 1;
         }
     }

     .fade-in {
        opacity: 0;
        animation: fadeIn var(0.5s) ease-in 1 forwards;
    }

    const current = document.querySelector('#current');
    const imgs = document.querySelectorAll('.imgs img');
    const opacity = 0.5;

    imgs[0].style.opacity = opacity;

    imgs.forEach(img => img.addEventListener('click', imgClick));

    function imgClick(e) {
    imgs.forEach(img => (img.style.opacity = 1));

    current.src = e.target.src;

    current.classList.add('fade-in');

    setTimeout(() => current.classList.remove('fade-in'), 500);

    e.target.style.opacity = opacity;
}

И код HTML:

<div class="main-img py"> 
    <img src="img/items/BurgerIm App.png" id="current" /> 
</div> 
<div class="imgs"> 
    <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> 
</div>

Answer 1

исправлена ​​опечатка в пропущенном окончании CSS } в первой части. Добавлены некоторые примеры изображений, чтобы показать, как это работает.

const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const opacity = 0.5;

imgs[0].style.opacity = opacity;

imgs.forEach(img => img.addEventListener('click', imgClick));

function imgClick(e) {
  imgs.forEach(img => (img.style.opacity = 1));
  current.src = e.target.src;
  current.classList.add('fade-in');
  setTimeout(() => current.classList.remove('fade-in'), 500);
  e.target.style.opacity = opacity;
}

.container {
  max-width: 1280px;
  padding: 10px 1rem;
  margin: auto;
  overflow: hidden;
}

.main-img img,
.imgs img {
  width: 100%;
}

.imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.imgs img {
  cursor: pointer;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(0.5s) ease-in 1 forwards;
  border: solid red 1px;
}

<div class="main-img py">
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/decimal.svg" id="current" />
</div>
<div class="imgs">
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/decimal.svg" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/copyright.svg" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img
    src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" /> <img src="img/items/BurgerIm App.png" />
</div>