Home How to – When image is clicked set opacity to 1 and lower opacity for other images

Questions

How to – When image is clicked set opacity to 1 and lower opacity for other images

March 1, 2022

I couldn’t for the life of me figure this out! How can I make this happen – When image is clicked set opacity to 1 and lower opacity for other images? I was told to add a class to the clicked image, store it, then remove the class when another image is clicked? but i cant figure it out!

let items = document.getElementsByClassName("item");
document.body.addEventListener('click', (event) => {
  const el = event.target;
for(var i=0; i< smallImg.length; i++) { 
  if (el.className !== 'sec') return;
  const wasSelected = el.classList.contains('selected');
  for (const d of document.querySelectorAll('div >img'))
    d.classList.remove('selected');
  el.classList.toggle('selected', !wasSelected)
  console.log(".selected");
  }
  
});

.sec:not(:first-child) {
  opacity: 0.3;
}

.sec:not:active{
  opacity: 0.3;
}

<div class="image-container">
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            class="item main-image"
          />
          <div class="secondary-image">
            <img
              src="https://source.unsplash.com/100x100/?pen"
              class="item sec item-1 active "
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
              class="item sec item-2"
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
              class="item sec item-3"
            />
            <img
              src="https://source.unsplash.com/100x100/?eraser"
              class="item sec item-4"
            />
          </div>

>Solution :

Just select the element that currently has the active class, and if such an element exists, remove that class from that. And then add it to the one that was clicked.

(Any check on whether the clicked element was actually one of those images, is not currently included. I simply kept your general click handler for body, please refine this yourself to apply only where needed.)

document.body.addEventListener('click', (event) => {
  let el = event.target;
  let prev = document.querySelector('.secondary-image .active');
  if(prev) {
    prev.classList.remove('active');
  }
  el.classList.add('active');
});

.secondary-image .sec:not(.active) {
  opacity: 0.3;
}

<div class="image-container">
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            class="item main-image"
          />
          <div class="secondary-image">
            <img
              src="https://source.unsplash.com/100x100/?pen"
              class="item sec item-1 active "
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
              class="item sec item-2"
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
              class="item sec item-3"
            />
            <img
              src="https://source.unsplash.com/100x100/?eraser"
              class="item sec item-4"
            />
          </div>