Как сбросить значение переменной при запуске событий onclick в цикле - PullRequest
Новая
       4

Как сбросить значение переменной при запуске событий onclick в цикле

0 голосов
/ 06 февраля 2019

У меня есть несколько галерей изображений, охватывающих различные категории, в приведенном ниже коде я включил только 2 (природа и город), чтобы их было легче читать.Я использую цикл «for» с «let» перед событием onclick, чтобы можно было щелкнуть любой узел в коллекции HTML, и я получу индекс.Затем я применяю этот индекс к массиву идентичных изображений, за исключением того, что они являются HD, а не миниатюрами.

Div'ы rightArrow и leftArrow используются для перехода к следующему или предыдущему изображению в массиве путем увеличения или уменьшения индекса на единицу, что довольно стандартно.Проблема в том, что при выходе из полноэкранного режима изменения индекса не сбрасываются.Поэтому, когда пользователь нажимает на другое изображение из той же галереи, чтобы повторно открыть полноэкранный режим, он не получает соответствующее изображение.

Итак, как мне сбросить индекс перед тем, как вызвать событие onclick для "natureThumbnailImgs" и"urbanThumbnailImgs"?Или включить в событие exitFullscreen что-то, что сбрасывает индекс?

Любая помощь очень ценится,

Стив 

var fullscreen = document.getElementsByClassName("fullscreen");
var fullImg = document.getElementById("fullImg");
var exitFullscreen = document.getElementById("exitFullscreen");

var rightArrow = document.getElementById("rightArrow");
var leftArrow = document.getElementById("leftArrow");

exitFullscreen.onclick = function() {
        fullscreen[0].removeAttribute("id", "showFullscreen"); 
    }

var natureThumbnailImgs = document.getElementsByClassName("natureThumbnailImgs");
var natureHDImgs = ["1 nature HD.jpg", "2 nature HD.jpg", "3 nature HD.jpg"];

// NATURE GALLERY ALBUM
for (let albumIndex = 0; albumIndex < natureThumbnailImgs.length; albumIndex++) {
        natureThumbnailImgs[albumIndex].onclick = function() {
            //DISPLAY FULLSCREEN
            fullscreen[0].setAttribute("id", "showFullscreen");
            //APPLY CHOSEN IMAGE
            fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];

            //NEXT
            rightArrow.onclick = function() {
                if (albumIndex < (natureThumbnailImgs.length - 1)) {
                    albumIndex++;
                    //APPLY CHOSEN IMAGE
                    fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];
                }
            }
            
            //PREV
            leftArrow.onclick = function() {
                if (albumIndex > 0) {
                    albumIndex--;
                    //APPLY CHOSEN IMAGE
                    fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];
                }
            }
        }
    }
    
var urbanThumbnailImgs = document.getElementsByClassName("urbanThumbnailImgs");
var urbanHDImgs = ["1 urban HD.jpg", "2 urban HD.jpg", "3 urban HD.jpg"];
    
// URBAN GALLERY ALBUM 
for (let albumIndex = 0; albumIndex < urbanThumbnailImgs.length; albumIndex++) {
    urbanThumbnailImgs[albumIndex].onclick = function() {
        //DISPLAY FULLSCREEN
        fullscreen[0].setAttribute("id", "showFullscreen");
        //APPLY CHOSEN IMAGE
        fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];

        //NEXT
        rightArrow.onclick = function() {
            if (albumIndex < (urbanThumbnailImgs.length - 1)) {
                albumIndex++;
                //APPLY CHOSEN IMAGE
                fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];
            }
        }

        //PREV
        leftArrow.onclick = function() {
            if (albumIndex > 0) {
                albumIndex--;
                //APPLY CHOSEN IMAGE
                fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];
            }
        }
    }
}
[class$="ThumbnailImgs"] {
  width: 100px;
  height: auto;
}

#fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#fullscreen {
  position: absolute;
  top: 50px;
  right: 50px;
}
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Image Gallery</title>
  <link href="css/IG.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<!-- NATURE ALBUM -->
  <div id="natureAlbum">
    <img class="natureThumbnailImgs" src="../../../Image Bank/1 nature thumbnail.jpeg"/>
    <img class="natureThumbnailImgs" src="../../../Image Bank/2 nature thumbnail.jpeg"/>
    <img class="natureThumbnailImgs" src="../../../Image Bank/3 nature thumbnail.jpeg"/>
  </div>

<!-- URBAN ALBUM -->
  <div id="urbanAlbum">
    <img class="urbanThumbnailImgs" src="../../../Image Bank/1 urban thumbnail.jpeg"/>
    <img class="urbanThumbnailImgs" src="../../../Image Bank/2 urban thumbnail.jpeg"/>
    <img class="urbanThumbnailImgs" src="../../../Image Bank/3 urban thumbnail.jpeg"/>
  </div>

<!-- FULL IMG DISPLAY -->
  <div id="fullscreen">
    <div id="exitFullscreen">X</div>
    <img id="fullImg" src=""/>
    <div id="leftArrow">Left Arrow Symbol</div>
    <div id="rightArrow">Right Arrow Symbol</div>
  </div>


</body>
</html>

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Старайтесь не обновлять индекс альбома в первую очередь - делайте его копию при каждом нажатии на миниатюру.Шаблон для одной галереи может выглядеть следующим образом: 

// NATURE GALLERY ALBUM
for (let albumIndex = 0; albumIndex < natureThumbnailImgs.length; albumIndex++) {
        natureThumbnailImgs[albumIndex].onclick = function() {
            index = albumIndex;   // copy the base album index
            //DISPLAY FULLSCREEN
            fullscreen[0].setAttribute("id", "showFullscreen");
            //APPLY CHOSEN IMAGE
            fullImg.src = "../../../Image Bank/" + natureHDImgs[index];

            //NEXT
            rightArrow.onclick = function() {
                if (index < (natureThumbnailImgs.length - 1)) {
                    index++;
                    //APPLY CHOSEN IMAGE
                    fullImg.src = "../../../Image Bank/" + natureHDImgs[index];
                }
            }

            //PREV
            leftArrow.onclick = function() {
                if (index > 0) {
                    index--;
                    //APPLY CHOSEN IMAGE
                    fullImg.src = "../../../Image Bank/" + natureHDImgs[index];
                }
            }
        }
    }

Это должно как минимум привести к поведению, отличному от размещенного кода.

0 голосов
/ 06 февраля 2019

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

Проверьте демо: https://codesandbox.io/s/lx4x66rq9

Очки:

  • создать атрибут индекса на каждом изображении, который поможет вам отслеживать то, что вы нажимаете
  • сохранить путь HD для изображения в качестве атрибута данных на изображении
  • создайте отдельную переменную для отслеживания активного изображения и очистите его при закрытии полноэкранного режима

JS: 

var fullscreen = document.getElementsByClassName("fullscreen");
var fullImg = document.getElementById("fullImg");
var exitFullscreen = document.getElementById("exitFullscreen");
var urbanThumbnailImgs = document.getElementsByClassName("urbanThumbnailImgs");
var activeImage = 0;

exitFullscreen.onclick = function() {
  fullscreen[0].removeAttribute("id", "showFullscreen");
  activeImage = 0;
};

var natureThumbnailImgs = document.getElementsByClassName(
  "natureThumbnailImgs"
);

// NATURE GALLERY ALBUM
createImages(natureThumbnailImgs);
createImages(urbanThumbnailImgs);

function createImages(images) {
  for (var albumIndex = 0; albumIndex < images.length; albumIndex++) {
    images[albumIndex].setAttribute("data-index", albumIndex);
    images[albumIndex].onclick = function(el) {
      fullscreen[0].setAttribute("id", "showFullscreen");
      fullImg.src = el.target.dataset.hd;

      var rightArrow = document.getElementById("rightArrow");
      var leftArrow = document.getElementById("leftArrow");

      activeImage = parseInt(el.target.dataset.index);

      //NEXT
      rightArrow.onclick = function() {
        if (activeImage < images.length - 1) {
          activeImage++;
          fullImg.src = images[activeImage].dataset.hd;
        }
      };

      //PREV
      leftArrow.onclick = function() {
        if (activeImage > 0) {
          activeImage--;
          fullImg.src = images[activeImage].dataset.hd;
        }
      };
    };
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...