Connect Gallery next and previous sibling

Question

I tried to create a gallery, if you click on the picture, then a new model box is shown, in this window there is next and back button but it doesn't work

console.log("jdkf");

var expandImg = document.getElementById("expandedImg");
let img = document.getElementsByClassName("pic");
let contener = document.getElementById("container");

for (let i = 0; i < img.length; i++) {
  img[i].addEventListener("click", (event) => {
    let cur = event.target;
    contener.style.display = "block"
    expandImg.src = cur.src;

  })
}

function next() {
  img[i].nextSibling
}
function back() {
  img[i].previousSibling
}

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.pic.active {
  opacity: 0.5;
}

.pic-large {
  cursor: pointer;
}

#expandedImg {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}


/* The expanding image container */

.container {
  display: none;
  /* Hidden by default عكسها block */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(252, 252, 252);
  /* Fallback color */
  background-color: rgba(255, 255, 255, 0.8);
  /* Black w/ opacity */
}


/* 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: #000;
  font-size: 35px;
  cursor: pointer;
}

#btn {
  position: absolute;
  top: 80%;
  left: 50%;
  z-index: 2;
}

×

user_295783 · Answer

I think you want something like this

There are some issues with the images not loading fast from the server, but the code should work

const expandImg = document.getElementById("expandedImg");
const imgs = document.querySelectorAll(".pic");
const imgText = document.getElementById("imgtext");
const container = document.getElementById("container");

let cur = 0;
container.addEventListener("click", (event) => {
  const tgt = event.target;
  if (tgt.classList.contains("closebtn")) {
    container.classList.add("hide")
    return;
  }
  const dir = tgt.id === "next" ? 1 : -1;
  cur += dir;
  if (cur < 0) cur = 0;
  if (cur >= imgs.length) cur = imgs.length - 1;
  expandImg.src = imgs[cur].src;
  imgText.textContent = imgs[cur].alt;
})

document.getElementById("content").addEventListener("click", (event) => {
  cur = event.target.dataset.idx
  container.classList.remove("hide")
})

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.pic.active {
  opacity: 0.5;
}

.pic-large {
  cursor: pointer;
}

#expandedImg {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}


/* The expanding image container */

.container {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(252, 252, 252);
  /* Fallback color */
  background-color: rgba(255, 255, 255, 0.8);
  /* Black w/ opacity */
}


/* 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: #000;
  font-size: 35px;
  cursor: pointer;
}

#btn {
  position: absolute;
  top: 80%;
  left: 50%;
  z-index: 2;
}

.hide {
  display: none;
}

×

Connect Gallery next and previous sibling

1 Answers