title: Image Click option isn't working with Vanilla Javascript; lightbox
body: <p>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.</p>
  
  <p>CSS:</p>
  
  <pre><code>    .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 =&gt; img.addEventListener('click', imgClick));
  
      function imgClick(e) {
      imgs.forEach(img =&gt; (img.style.opacity = 1));
  
      current.src = e.target.src;
  
      current.classList.add('fade-in');
  
      setTimeout(() =&gt; current.classList.remove('fade-in'), 500);
  
      e.target.style.opacity = opacity;
  }
  </code></pre>
  
  <p>And the HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="main-img py"&gt; 
      &lt;img src="img/items/BurgerIm App.png" id="current" /&gt; 
  &lt;/div&gt; 
  &lt;div class="imgs"&gt; 
      &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; &lt;img src="img/items/BurgerIm App.png" /&gt; 
  &lt;/div&gt;
  </code></pre>