Lightbox
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="leiste">
<div class="zuruck">prev</div>
<div class="vor">next</div>
<div class="close">X</div>
</div>
<div class="lightbox"></div>
<div class="flexImg">
<img src="fest.jpg" alt="Fest">
<img src="fest2.jpg" alt="Fest">
<img src="fest3.jpg" alt="Fest">
<img src="fest4.jpg" alt="Fest">
<img src="fest5.jpg" alt="Fest">
<img src="fest2.jpg" alt="Fest">
</div>
<script src="main.js"></script>
</body>
</html>
CSS
body {
background-color: lightblue;
margin: 0;
font-family: sans-serif;
}
.bodyFull {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.flexImg {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 30%;
margin: 5px;
}
.imgFull {
width: 90%;
margin: 0;
border: 2px solid white;
}
.leiste {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 10;
padding: 10px;
font-size: 2em;
color: white;
display: none;
}
.leisteFull {
display: flex;
}
.vor,
.zuruck {
width: 20%;
cursor: pointer;
}
.close {
cursor: pointer;
width: 60%;
text-align: right;
}
.lightboxFull {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
JS
let allImg = document.querySelectorAll("img");
let vor = document.querySelector(".vor");
let zuruck = document.querySelector(".zuruck");
let leiste = document.querySelector(".leiste");
let close = document.querySelector(".close");
let lightbox = document.querySelector(".lightbox");
let arrayImg = Array.from(allImg);
let arraySrc = [];
allImg.forEach(saveSrc);
function saveSrc(elem) {
arraySrc.push(elem.getAttribute("src"));
}
allImg.forEach(addClick);
function addClick(elem) {
elem.addEventListener("click", fullScreen);
}
function fullScreen(e) {
console.log(2);
document.body.classList.add("bodyFull");
leiste.classList.add("leisteFull");
lightbox.classList.add("lightboxFull");
let newImg = document.createElement("img");
newImg.classList.add("imgFull");
let clickIndex = arrayImg.indexOf(e.currentTarget);
newImg.setAttribute("src", arraySrc[clickIndex]);
lightbox.appendChild(newImg);
function setCounter() {
let counter = clickIndex;
function count(vorzeichen) {
if (vorzeichen === "-") {
counter--;
if (counter < 0) {
counter = allImg.length - 1;
}
return counter;
}
else {
counter++;
if (counter >= allImg.length) {
counter = 0;
}
return counter;
}
}
return count;
}
let rueckCounter = setCounter();
close.addEventListener("click", () => {
document.body.classList.remove("bodyFull");
newImg.remove();
lightbox.classList.remove("lightboxFull");
leiste.classList.remove("leisteFull");
});
zuruck.addEventListener("click", () => {
let currentIndex = rueckCounter("-");
newImg.setAttribute("src", arraySrc[currentIndex]);
});
vor.addEventListener("click", () => {
let currentIndex = rueckCounter("+");
newImg.setAttribute("src", arraySrc[currentIndex]);
});
newImg.addEventListener("touchstart", setStart);
console.log(1);
function setStart(eve1) {
let startX = eve1.changedTouches[0].clientX;
newImg.addEventListener("touchend", slide);
function slide(eve2) {
let endX = eve2.changedTouches[0].clientX;
if (startX - endX < -20) {
let currentIndex = rueckCounter("+");
newImg.setAttribute("src", arraySrc[currentIndex]);
}
else if (startX - endX > 20) {
let currentIndex = rueckCounter("-");
newImg.setAttribute("src", arraySrc[currentIndex]);
}
newImg.removeEventListener("touchend", slide);
}
}
}