Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2020, 11:19
Новичок на форуме
Отправить личное сообщение для leramadova Посмотреть профиль Найти все сообщения от leramadova
 
Регистрация: 31.03.2020
Сообщений: 2

Изображения popup, как сделать ссылки, назад и вперед
Все приветы, дорогие программисты.

У меня возникла сложность, нужна ваша помощь.
Имеется код, который работает: https://jsfiddle.net/leramadova/m3gdz86y/
Но я бы хотела добавить функционал, т.е. кнопки на предыдущее фото и следующее.

Какой код нужно добавить сюда, чтобы ссылки стали действовать?

prv.addEventListener('click', function() {
    //???
});
 
nxt.addEventListener('click', function() {
    //???
});


https://jsfiddle.net/leramadova/m3gdz86y/
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2020, 12:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

кнопки вперёд назад
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">&times;</span>
  <img class="modal_img">
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2020, 19:12
Новичок на форуме
Отправить личное сообщение для leramadova Посмотреть профиль Найти все сообщения от leramadova
 
Регистрация: 31.03.2020
Сообщений: 2

Спасибочки, работает.

Вот бы понять, как работают(почему так) эти строчки с тирешками 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";
  });
}
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2020, 19:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

leramadova,
привязка номера элемента к самому элементу, чтоб не высчитывать на какой элемент по счёту мы нажали.

Нестандартные атрибуты, dataset
Свойство dataset, data-атрибуты
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 17:12
навигация AJAX кнопки назад - вперед FRIE AJAX и COMET 7 19.08.2010 13:38
Значение переменной не может привысить 30 и опуститься ниже 1-го, как сделать? libinstyle Events/DOM/Window 3 12.07.2010 23:27