Блог

Главная - Вопросы по программированию - добавление прослушивателей событий предыдущего/следующего слайда для модального лайтбокса (Javascript)

добавление прослушивателей событий предыдущего/следующего слайда для модального лайтбокса (Javascript)

#javascript #html #css #modal-dialog #lightbox

Вопрос:

Я создаю сайт-портфолио для друга, на котором представлены картины. Все платежи отображаются на странице индекса, и я создал цикл for, чтобы при нажатии на каждую картину открывался режим отображения этой картины:

 // create references to the modal...
const modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
const images = document.getElementsByClassName('myImages');
// the image in the modal
const modalImg = document.getElementById("img01");
// and the caption in the modal
const captionText = document.getElementById("caption");


// Go through all of the images with our custom class
for (let i = 0; i < images.length; i  ) {
  let img = images[i];
  // and attach our click listener for this image.
  img.addEventListener("click", openModal)
}

// Function to open modal
function openModal() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.a<
}

Я прикрепил кнопки «Предыдущий» и «следующий» к модальному, и я хотел бы иметь возможность перемещаться между картинами туда и обратно, как только модальный будет открыт:

 <!-- The Modal -->
  <div id="myModal" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">amp;times; 
  </span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>

  <a class="prev">amp;#10094;</a>
  <a class="next">amp;#10095;</a>
</div>

Я пытаюсь добавить прослушиватели событий к кнопкам prev/next, однако у меня возникли проблемы — я не уверен, как получить доступ к выбранному изображению из модального, чтобы оно знало, что нужно открыть предыдущее/следующее при нажатии кнопок prev/next.

 // selecting the prev and next buttons
const prev = document.querySelector(".prev")
const next = document.querySelector(".next")

prev.addEventListener("click", previousSlide);

function previousSlide() {
  // Not sure what to put here...
}

Может ли кто-нибудь помочь мне или, по крайней мере, указать мне правильное направление? Спасибо

Комментарии:

1. jsFiddle или рабочий пример действительно помогли бы, я вижу, что вы запрашиваете некоторые элементы по именам классов, но в предоставленном вами HTML таких классов нет, поэтому, чтобы помочь вам более конкретно, был бы полезен более правильный рабочий пример.

2. Привет, Эразм, спасибо за предложение. Решение, опубликованное ниже, правильно угадало классы, однако я обязательно сделаю свои примеры более понятными в будущем!

Ответ №1:

Чтобы найти предыдущее и/или следующее изображение, вам нужно знать, на каком изображении вы находитесь. Я предлагаю сделать это, передав индекс изображения openModal и «сохранив» его с помощью data-* .

Как только это будет сделано, при одном нажатии на .prev ou .next вам нужно будет только добавить или удалить 1 в индекс и позвонить openModal

В приведенном ниже фрагменте я попытался «угадать», чего не хватало HTML и CSS

 // create references to the modal...
const modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
const images = document.getElementsByClassName('myImages');
// the image in the modal
const modalImg = document.getElementById("img01");
// and the caption in the modal
const captionText = document.getElementById("caption");


// Go through all of the images with our custom class
for (let i = 0; i < images.length; i  ) {
  let img = images[i];
  // and attach our click listener for this image.
  img.addEventListener("click", event => {
    openModal(i)
  });
}

// Function to open modal
function openModal(index) {
  console.log('index', index);
  modal.dataset.index = index;
  modal.classList.add("open");
  modalImg.src = images[index].src;
  captionText.innerHTML = images[index].a<
}

document.querySelector(".prev").addEventListener('click', event => {
  const index = modal.dataset.index === '0' ? images.length - 1 :  modal.dataset.index - 1
  openModal(index);
})
document.querySelector(".next").addEventListener('click', event => {
  openModal(( modal.dataset.index   1) % images.length);
}) 
 #myModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(2px);
  width: 100%;
  height: 100%;
  padding: 30px;
  place-content: center;
  box-sizing: border-box;
  background-color: #e8e8e880;
}

#myModal.open {
  display: grid;
}

.prev,
.next,
.close {
  position: absolute;
  cursor: pointer;
}

.close {
  top: 20px;
  right: 20px;
}

.prev,
.next {
  top: 50%;
  transform: translateY(-50%);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
} 
 <img src="https://picsum.photos/200/300?random=1" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=2" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=3" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=4" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=5" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=6" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=7" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=8" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=9" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=10" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=11" alt="" class="myImages">
<img src="https://picsum.photos/200/300?random=12" alt="" class="myImages">

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').classList.remove('open')">amp;times; 
  </span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>

  <a class="prev">amp;#10094;</a>
  <a class="next">amp;#10095;</a>
</div>

Комментарии:

1. большое вам спасибо, это сработало идеально! Раньше я не сталкивался со свойством набора данных — это очень удобно!

Метки: