Изображения popup, как сделать ссылки, назад и вперед
Все приветы, дорогие программисты.
У меня возникла сложность, нужна ваша помощь. Имеется код, который работает: https://jsfiddle.net/leramadova/m3gdz86y/ Но я бы хотела добавить функционал, т.е. кнопки на предыдущее фото и следующее. Какой код нужно добавить сюда, чтобы ссылки стали действовать? prv.addEventListener('click', function() {
//???
});
nxt.addEventListener('click', function() {
//???
});
https://jsfiddle.net/leramadova/m3gdz86y/ |
кнопки вперёд назад
leramadova,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.modal {
display: none; /*Hidden by default */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* border: 2px solid red; */
}
.modal_img {
margin: auto;
display: block;
width: 100%;
width: 300px;
height: auto;
}
/* The Close Button */
.close {
position: absolute;
top: 0;
right: 10px;
color: #777;
font-size: 40px;
line-height: 1;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#prv {
position: absolute;
bottom: 0;
left: 10px;
color: red;
font-size: 30px;
line-height: 1;
}
#prv:hover,
#prv:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#nxt {
position: absolute;
bottom: 0;
right: 10px;
color: red;
font-size: 30px;
line-height: 1;
}
#nxt:hover,
#nxt:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.black {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
var modal = document.querySelector(".modal");
var black = document.querySelector(".black");
var img = document.querySelectorAll("img.popup");
var modalImg = document.querySelector(".modal_img");
var prv = document.getElementById('prv');
var nxt = document.getElementById('nxt');
var index = 0;
for(var i = 0; i < img.length; i++) {
img[i].dataset.index = i;
img[i].addEventListener('click', function() {
index = this.dataset.index;
modal.style.display = "block";
modalImg.src = this.src;
black.style.display = "block";
});
}
function show(num)
{
index = (img.length + num + index) % img.length;
modalImg.src = img[index].src;
}
prv.addEventListener('click', function() {
show(-1)
});
nxt.addEventListener('click', function() {
show(1)
})
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
black.style.display = "none";
}
var black = document.querySelector(".black");
black.onclick = function() {
modal.style.display = "none";
black.style.display = "none";
}
});
</script>
</head>
<body>
<img src="https://i.ibb.co/RzQsnr9/11.jpg" class="popup" >
<img src="https://i.ibb.co/6yQ1JBL/22.jpg" class="popup" >
<img src="https://i.ibb.co/f28CsM7/33.jpg" class="popup" >
<div class="black"></div>
<div class="modal">
<span id="prv">prev</span>
<span id="nxt">next</span>
<span class="close">×</span>
<img class="modal_img">
</div>
</body>
</html>
|
Спасибочки, работает.
Вот бы понять, как работают(почему так) эти строчки с тирешками 3 и 5) var index = 0;
for(var i = 0; i < img.length; i++) {
img[i].dataset.index = i; --------------------------
img[i].addEventListener('click', function() {
index = this.dataset.index; ----------------------
modal.style.display = "block";
modalImg.src = this.src;
black.style.display = "block";
});
}
|
leramadova,
привязка номера элемента к самому элементу, чтоб не высчитывать на какой элемент по счёту мы нажали. Нестандартные атрибуты, dataset Свойство dataset, data-атрибуты |
| Часовой пояс GMT +3, время: 21:33. |