Несколько галерей Lightbox ⇐ Javascript

[Anonymous]

Я не знаю почти ничего о Javascript, поэтому я не уверен, что я даже делаю, но я пытаюсь сделать страницу с Galleries , которая открывает Lightbox, когда вы нажимаете на одну из фотографий. /> Вот код для того, что я смог сделать до сих пор (я получил код для Lightbox в W3Schools и немного изменил его): < /p>


praithprint-> pretkyride-> praithprint-> praithprint-jsprint-jsprint-jsprint-jsprint-jsprint-jsprint-jsprint-jsprint-jsprint->

Код: Выделить всё

const lightboxes = document.querySelectorAll(".lightbox");

function openLightbox() {
lightboxes.forEach(lightbox => {
document.querySelector('.lightbox').style.display = "block";
document.querySelector('body').style.overflowY = "hidden";
});
}

function closeLightbox() {
lightboxes.forEach(lightbox => {
const lightClose = document.querySelector('.close');
const lightContent = document.querySelector('.lightbox-content');

if (lightClose.contains(event.target) || !lightContent.contains(event.target)) {
lightbox.style.display = "none";
document.querySelector('body').style.overflowY = "visible";
}
});
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
lightboxes.forEach(lightbox => {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1;}
if (n < 1) {slideIndex = slides.length;}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}

slides[slideIndex-1].style.display = "block";
});
}< /code>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1vw;
max-width: 100vw;  /* Recommended */
margin: 1vw auto;
padding: 1vw;
}

.gallery figure {
display: flex;
justify-items: center;
height: 180px;
margin: 0;

img {
width: 100%;
object-fit: cover;
object-position: center;
}
}

img:hover {
cursor: pointer;
}

.lightbox {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ffffffee;
align-content: center;
justify-items: center;
}

.lightbox-content {
position: relative;
width: 80vh;
justify-items: center;
align-content: center;
z-index: 100;
grid-gap: 5vh;
margin-bottom: 10vh;

figure {
display: flex;
flex-flow: column;
margin: 0;
}

figure img {
max-height: 60vh;
object-fit: contain;
}
}

.imgcap {
width: min-content;
}

figcaption {
height: 40px;
}

.mySlides {
display: none;
grid-gap: 1vh;
}

.prev, .next, .close {
position: absolute;
color: black;
font-weight: bold;
font-size: 40px;
font: 700 40px;
cursor: pointer;
align-content: center;
text-shadow: 2px 2px 4px #00000064;
opacity: 0.6;
transition: 0.3s ease;
}

.close {
position: relative;
float: right;
margin-right: -30px;
margin-top: 10px;
z-index: 1000;
}

.next {
right: 0;
padding-left: 50%;
}

.prev {
padding-right: 50%;
}

.next, .prev {
top: 5%;
height: 80%;
margin: 0 -8vh;
}

.prev:before {
content: '\3008';
}

.close:before {
content: '\2A2F';
}

.next:before {
content: '\3009';
}

/* Number text (1/3 etc) */
.numbertext {
color: black;
font: 700 1em;
text-align: center;
}

:where(.prev, .next, .close):hover {
opacity: 1;
}

@media screen and (max-width: 650px) {
.lightbox-content {
width: 80vw;
max-width: none;
figure img {
max-width: none;
height: 60vw;
}
}

.next, .prev {
margin:  0 -8vh;
}
}< /code>



[img]https://placehold.co/500x300/000/cyan?text=1[/img]



[img]https://placehold.co/500x300/000/cyan?text=2[/img]



[img]https://placehold.co/500x300/000/cyan?text=3[/img]



[img]https://placehold.co/500x300/000/cyan?text=4[/img]



[img]https://placehold.co/500x300/000/cyan?text=5[/img]



[img]https://placehold.co/500x300/000/cyan?text=6[/img]



[img]https://placehold.co/500x300/000/cyan?text=7[/img]



[img]https://placehold.co/500x300/000/cyan?text=8[/img]









1 / 8
[img]https://placehold.co/500x300/000/cyan?text=1[/img]
first cyan



2 / 8
[img]https://placehold.co/500x300/000/cyan?text=2[/img]
second cyan



3 / 8
[img]https://placehold.co/500x300/000/cyan?text=3[/img]
third cyan



4 / 8
[img]https://placehold.co/500x300/000/cyan?text=4[/img]
fourth cyan



5 / 8
[img]https://placehold.co/500x300/000/cyan?text=5[/img]
fifth cyan



6 / 8
[img]https://placehold.co/500x300/000/cyan?text=6[/img]
sixth cyan



7 / 8
[img]https://placehold.co/500x300/000/cyan?text=7[/img]
seventh cyan



8 / 8
[img]https://placehold.co/500x300/000/cyan?text=8[/img]
eighth cyan












[img]https://placehold.co/500x300/000/chartreuse?text=1[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=2[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=3[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=4[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=5[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=6[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=7[/img]



[img]https://placehold.co/500x300/000/chartreuse?text=8[/img]









1 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=1[/img]
first green



2 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=2[/img]
second green



3 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=3[/img]
third green



4 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=4[/img]
fourth green



5 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=5[/img]
fifth green



6 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=6[/img]
sixth green



7 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=7[/img]
seventh green



8 / 8
[img]https://placehold.co/500x300/000/chartreuse?text=8[/img]
eighth green

Я не знаю, что делаю неправильно:^(

Подробнее здесь: https://stackoverflow.com/questions/797 ... -galleries