Добавление кнопок «Далее» и «Предыдущий» в модальное состояние с помощью JavaScript - PullRequest
Новая
       40

Добавление кнопок «Далее» и «Предыдущий» в модальное состояние с помощью JavaScript

0 голосов
/ 17 октября 2019

Я сделал чистый модал для использования на веб-сайте для открытия изображений, все работает отлично и довольно хорошо.

Теперь я хочу сделать следующее изображение и кнопку предыдущего изображения для лучшего взаимодействия с пользователем. У меня есть план, поэтому я нахожу индекс текущего изображения, который находится в модальном режиме, и увеличиваю его на единицу на следующей кнопке, и уменьшаю на единицу на предыдущей кнопке, HM ok кажется достаточно простым. Итак, как мне это сделать? это мой модальный код 

window.onload = function() {
  var imgArr = document.getElementsByClassName("myImg");

  var modalWindow = document.getElementById("myModal");
  var modalImg = document.getElementById("img01");
  var caption = document.getElementById("caption");
  var span = document.getElementById("close");
  var modalBlock = document.getElementById("modalBlock");

  for (i = 0; i < imgArr.length; i++) {
    var picture = imgArr[i];
    var list = Array.from(imgArr);

    picture.onclick = function() {
      openImg(this);
      var index = list.indexOf(this);
      console.log(index);
    };
  }

  function openImg(pic) {
    modalWindow.style.display = "block";
    modalBlock.style.transform = "translateY(0%)";
    modalImg.src = pic.src;
    modalImg.alt = pic.alt;
    caption.innerHTML = modalImg.alt;
    imgIndex = picture[i];

    bodyScrollLock.disableBodyScroll(myModal);
  }






};

Теперь у меня есть открытое изображение, на которое я нажал, и его индекс, и я застрял в том, что делать дальше. Я нашел учебник по лайтбоксу w3, но он настолько отличается от моего кода, что мне нужно все поменять местами. Кто-нибудь есть идеи, как я могу сделать это с моим собственным кодом?

A jsFiddle, как это выглядит в данный момент https://jsfiddle.net/superVoja/eoyda1vh/15/

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Проверка орфографии и грамматики Английский Хорошо, вот ответ, который я получил сам, если кто-нибудь прочтет это, дайте себе время, вы сами найдете ответ!

Я следовал своему коду и сделал именно то, что япытался сделать, я нашел индекс изображения, по которому щелкнули, а затем я просто увеличил его на единицу, как это. 

var next = this.document.getElementById("next");
  var slideIndex = "";

  for (i = 0; i < imgArr.length; i++) {
    var picture = imgArr[i];
    var list = Array.from(imgArr);
    picture.onclick = function() {
      var index = list.indexOf(this);

      slideIndex = index;
      openImg(imgArr[index]);
      console.log(index);
    };
  }

  next.addEventListener("click", function(event) {
    openImg(imgArr[(slideIndex += 1)]);
  });

Это может выглядеть не очень красиво, но это мое, и я горжусь этим!

А вот и ссылка Как это выглядит!

0 голосов
/ 17 октября 2019

Если вы настаиваете на создании этого с нуля, вам нужно подумать о том, что вы должны контролировать с помощью HTML и CSS, а все остальное оставить делать с помощью JavaScript.

Я бы использовал набор окон Modal с Htmlи скрыть это с помощью CSS, тогда, когда ссылка на изображение и срабатывает, я бы вывел модальное на передний план. Используя fadein fadeout, opacity и z-index, чтобы убедиться, что он находится на передней панели. Установите фон на черный, чтобы получить модальный эффект.

Более быстрый способ - использовать библиотеку, такую ​​как Lightbox js

Затем переписать с помощью CSS и, возможно, некоторые js, если нужночтобы приспособиться по своему вкусу.

...