Image Click option isn't working with Vanilla Javascript; lightbox

Question

I'm having trouble making my images clickable using vanilla javascript. Is there a better way? By the way, I should add that after several failed attempts in creating a Lightbox image gallery, this is what I've done. See code below.

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

And the HTML code:

<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

fixed a typo in the CSS missing ending } on first part. Added some sample images to show it working.

 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>