Active image tab image gallary-CodePudding

I have a tab gallary (from w3school) when you can choose image to show under. Wondering how to have active class för the choosen image after I choose. Like when you see it on navbar (this example shows that pages is open). (Home pages about contact) I just need to give the clicked image any class(opacity or color) I tried many things but still new with Javascript and couldn't reach what I want

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div >
  <div >
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div >
  <span onclick="this.parentElement.style.display='none'" >&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

CodePudding user response：

at first you need to find all images and remove class from them
after that add class for clicked image

function myFunction(img) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = img.src;
  imgText.innerHTML = img.alt;
  expandImg.parentElement.style.display = "block";
  img.closest('.row').querySelectorAll('img').forEach(img => img.classList.remove('yourClassName'))
  img.classList.add('yourClassName')
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.yourClassName {
border: 1px solid red;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div >
  <div >
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div >
  <span onclick="this.parentElement.style.display='none'" >&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

CodePudding user response：

You can do this using an event listener that adds whatever classes you need and remove them. You can use event.target to access the element which triggered the listener and add/remove classes accordingly:

// get the images that we want to listen for clicks from
let img = document.querySelectorAll(".column img");

// add an event listener to each image
img.forEach(function(elem) {
  // when one of the images is clicked, add the border-cyan class to it and remove the class from any other elements
  elem.addEventListener("click", function(event) {
    // check if any other elements have the class and remove it if some do
    if (document.querySelectorAll(".your-class").length != 0) {
      document.querySelector(".your-class").classList.remove("your-class");
      // if there are no other elements with the border cyan class do nothing
    } else {}
    // add the border cyan class to the element clicked
    event.target.classList.add("your-class")
  });
});

In the code snippet below, I have demonstrated this by having a class that makes the active image border cyan when it is clicked:

// get the images that we want to listen for clicks from
let img = document.querySelectorAll(".column img");

// add an event listener to each image
img.forEach(function(elem) {
  // when one of the images is clicked, add the border-cyan class to it and remove the class from any other elements
  elem.addEventListener("click", function(event) {
    // check if any other elements have the class and remove it if some do
    if (document.querySelectorAll(".border-cyan").length != 0) {
      document.querySelector(".border-cyan").classList.remove("border-cyan");
      // if there are no other elements with the border cyan class do nothing
    } else {}
    // add the border cyan class to the element clicked
    event.target.classList.add("border-cyan")
  });
});

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.border-cyan {
  border: 3px solid cyan;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div >
  <div >
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div >
  <span onclick="this.parentElement.style.display='none'" >&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>