Модальное слайд-шоу для нескольких изображений на странице

Мне удалось собрать то, что я хотел, но когда задействовано несколько изображений, они объединяются в одно слайд-шоу. Конечная цель — разместить на странице несколько изображений. При нажатии на определенное изображение открывается слайд-шоу из других изображений. Мой текущий код работает отлично, пока на страницу не будет добавлено второе изображение, поскольку оно для всего ссылается на идентификатор элемента img01. Как я могу заставить этот JavaScript определять, на какое изображение я нажимаю, и показывать только слайд-шоу изображений, предназначенных для него.

Просто чтобы убедиться, что все ясно:

Нажмите на изображение 1 — откройте слайд-шоу с помощью (изображение 1, изображение B, изображение C)
Нажмите на изображение 2 — откройте слайд-шоу с помощью (изображение 2, изображение E, изображение F).

Я пробовал разделить каждый набор изображений на img1, img2 и т. д. Но не знаю, как это сделать без лишнего кода.

Это то, что у меня есть до сих пор:

var modal = document.getElementById("myModal");
var img = document.getElementsByTagName('img');
var modalImg = document.getElementById('img01');
var currentImage;
for (var i = 0; i < img.length - 1; i++) {
  img[i].setAttribute('data', i);
  img[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.dataset.biggerSrc;
    currentImage = this;
    document.getElementById("modal-footer").innerHTML = "Image 1 of " + i;
  }
}

document.getElementById('prev').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  if (count > 0) {
    currentImage = img[count - 1];
    document.getElementById("modal-footer").innerHTML = "Image " + count++ + " of " + i;
  }
  modalImg.src = currentImage.dataset.biggerSrc;
}

document.getElementById('next').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  if (count < img.length - 2) {
    currentImage = img[count + 1];
    document.getElementById("modal-footer").innerHTML = "Image " + (count + 2) + " of " + i;;
  }
  modalImg.src = currentImage.dataset.biggerSrc;

}

document.getElementsByClassName("close")[0].onclick = function() {
  modal.style.display = "none";
}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  width: 60%;
  display: block;
  margin: 0 auto;
}

.myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 65%;
}

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 50px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#modal-footer {
  font-size: 30px;
  position: absolute;
  bottom: 25px;
  left: 0;
}

<div class = "container">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 1" data-bigger-src = "https://placehold.co/600x300?text=slide 1" width = "300" height = "150">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 2" data-bigger-src = "https://placehold.co/600x300?text=slide 2" width = "300" height = "150" style = "Display: none;">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 3" data-bigger-src = "https://placehold.co/600x300?text=slide 3" width = "300" height = "150" style = "Display: none;">

  <div id = "myModal" class = "modal">
    <span class = "close">X</span>
    <img class = "modal-content" id = "img01">
    <a id = "prev" class = "prev">&#10094;</a>
    <a id = "next" class = "next">&#10095;</a>
    <div id = "modal-footer">
    </div>
  </div>

  <div class = "container">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 1" data-bigger-src = "https://placehold.co/600x300?text=slide 1" width = "300" height = "150">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 2" data-bigger-src = "https://placehold.co/600x300?text=slide 2" width = "300" height = "150" style = "Display: none;">
  <img class = "myImg" src = "https://placehold.co/300x150?text=slide 3" data-bigger-src = "https://placehold.co/600x300?text=slide 3" width = "300" height = "150" style = "Display: none;">

    <div id = "myModal" class = "modal">
      <span class = "close">X</span>
      <img class = "modal-content" id = "img01">
      <a id = "prev" class = "prev">&#10094;</a>
      <a id = "next" class = "next">&#10095;</a>
      <div id = "modal-footer">
      </div>
    </div>

javascript html css

03.06.2024 18:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В идеале вы должны использовать только одно модальное окно. Также id должен быть уникальным для всех элементов.

Итак, давайте пойдем по идеалу и оставим один модальный вариант. Что касается изображений, мы сначала пройдемся по .container, беря изображения из каждого. В этот код можно было бы внести множество улучшений, но он работает.

var modal = document.getElementById("myModal")
var containers = document.querySelectorAll(".container")
var modalImg = document.getElementById('img01')
var modalFooter = document.getElementById("modal-footer")
var currentContainer = null
var currentImage = null

containers.forEach(function(container) {
  var imgs = container.querySelectorAll(".myImg")
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].setAttribute('data', i);
    imgs[i].onclick = function(ev) {
      currentContainer = container
      modal.style.display = "block";
      modalImg.src = this.dataset.biggerSrc;
      currentImage = this;
      modalFooter.innerHTML = "Image 1 of " + i + " of " + currentContainer.id;
    }
  }
})


document.getElementById('prev').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  var imgs = currentContainer.querySelectorAll(".myImg")
  if (count > 0) {
    currentImage = imgs[count - 1]
    modalFooter.innerHTML = "Image " + count++ + " of " + imgs.length;
  }
  modalImg.src = currentImage.dataset.biggerSrc;
}

document.getElementById('next').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  var imgs = currentContainer.querySelectorAll(".myImg")
  if (count < imgs.length - 1) {
    currentImage = imgs[count + 1]
    modalFooter.innerHTML = "Image " + (count + 2) + " of " + imgs.length;
  }
  modalImg.src = currentImage.dataset.biggerSrc;
}

document.querySelector(".close").onclick = function() {
  modal.style.display = "none";
}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  width: 60%;
  display: block;
  margin: 0 auto;
}

.myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 65%;
}

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 50px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#modal-footer {
  font-size: 30px;
  position: absolute;
  bottom: 25px;
  left: 0;
}

<div id = "gallery1" class = "container">
  <img class = "myImg" src = "../images/17Csmall.PNG" data-bigger-src = "../images/17C.PNG" width = "300" height = "150">
  <img class = "myImg" src = "../images/17C-a.PNG" data-bigger-src = "../images/17C-a.PNG" width = "300" height = "150" style = "Display: none;">
  <img class = "myImg" src = "../images/17C-b.PNG" data-bigger-src = "../images/17C-b.PNG" width = "300" height = "150" style = "Display: none;">
</div>

<div id = "gallery2" class = "container">
  <img class = "myImg" src = "../images/18Csmall.PNG" data-bigger-src = "../images/18C.PNG" width = "300" height = "150">
  <img class = "myImg" src = "../images/18C-a.PNG" data-bigger-src = "../images/18C-a.PNG" width = "300" height = "150" style = "Display: none;">
  <img class = "myImg" src = "../images/18C-b.PNG" data-bigger-src = "../images/18C-b.PNG" width = "300" height = "150" style = "Display: none;">
</div>

<div id = "myModal" class = "modal">
  <span class = "close">X</span>
  <img class = "modal-content" id = "img01">
  <a id = "prev" class = "prev">&#10094;</a>
  <a id = "next" class = "next">&#10095;</a>
  <div id = "modal-footer">
  </div>
</div>

Это именно то, что я хотел! Большое спасибо!!! Я все еще новичок в JavaScript, поэтому ценю вашу помощь!

— 03.06.2024 19:12

03.06.2024 18:46