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

Question

Я создал динамическую галерею лайтбоксов и хочу добавить функцию «следующий» и «предыдущий». Я пытался последние пару дней, но всегда бил кирпичную стену ...

Вот мой код (я включу все, чтобы он стал более понятным):

Мой файл gallery.php включен в index.php. Вы можете добавить изображения в галерею, добавив изображения в каталог. Я назначаю идентификатор для каждого изображения. :

<?php
//function call
return showImages();

//function definition
function showImages(){
  $out = "<h1>Image Gallery</h1>";
  $out .= "<ul id='images'>";
  $folder = "img";
  $filesInFolder = new DirectoryIterator($folder);
  $imgnumber = 1;
  while ($filesInFolder->valid()){
    $file = $filesInFolder->current();
    $filename = $file->getFilename();
    $src = "$folder/$filename";
    $fileInfo = new Finfo( FILEINFO_MIME_TYPE );
    $mimeType = $fileInfo->file($src);
    if ($mimeType === 'image/jpeg'){
      $out.= "<li><img id='imgnumber$imgnumber' src='$src' /></li>";
      $imgnumber = $imgnumber + 1;
    }
    $filesInFolder->next();
  }

  $out .= "</ul>";
  return $out;
}

Имея в виду прогрессивное улучшение, вот мой файл JS:

function init (){
  window.console.log("welcome newww user");
  var lightboxElements = "<div id='lightbox'>";
  lightboxElements += "<div id='overlay' class='hidden'></div>";
  lightboxElements += "<img class='hidden' id='big-image' />";
  lightboxElements += "<div id='navigation' class='hidden'>";
  lightboxElements += "<div id='next'>Next</div><div id='prev'>Prev</div>";
  lightboxElements += "</div>";
  lightboxElements += "</div>";
  document.querySelector("body").innerHTML += lightboxElements;
  var bigImage = document.querySelector("#big-image")
  bigImage.addEventListener("click",toggle,false);
  var overlay = document.querySelector("#overlay")
  overlay.addEventListener("click",toggle,false);
  prepareThumbs();
}

function toggle(){
  var clickedImage = event.target;
  var bigImage = document.querySelector("#big-image");
  var overlay = document.querySelector("#overlay");
  var navigation = document.querySelector("#navigation");
  bigImage.src = clickedImage.src;
  //if overlay is hidden, we can assume the big image is hidden
  if (overlay.getAttribute("class") === "hidden"){
    overlay.setAttribute("class", "showing");
    bigImage.setAttribute("class", "showing");
    navigation.setAttribute("class", "showing");
  } else {
    overlay.setAttribute("class", "hidden");
    bigImage.setAttribute("class", "hidden");
    navigation.setAttribute("class", "hidden");
  }
}


function prepareThumbs(){
  var liElements = document.querySelectorAll("ul#images li");
  var i = 0;
  var image, li;
  //loop through all <li> liElements
  while (i < liElements.length){
    li = liElements[i];
    //set class='lightbox'
    li.setAttribute("class", "lightbox");
    image = li.querySelector("img");
    //register a click event handeler for the <img> Elements
    image.addEventListener("click", toggle, false);
    i += 1;
  }
}

document.addEventListener("DOMContentLoaded", init, false);

Вот файл CSS:

h1{
  color:red;
}
div#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background:black;
  opacity: 0.85;
  transition: opacity 1s ease-in;
}
/* hide overlay and big-image and navigation */
div#overlay.hidden, img#big-image.hidden, div#navigation.hidden {
  opacity: 0;
  left: -200%;
}
/* resize images and display them as a horisontal list */
li.lightbox img {
  height: 100px;
}
li.lightbox {
  display: inline-block;
  margin: 10px;
}
#big-image.showing{
  max-width: 80%;
  max-height: 90%;
  position: absolute;
  background-color: white;
  padding: 10px;
  top: 5%;
  left: 10%;
}
#navigation.showing {
  max-width: 80%;
  max-height: 90%;
  position: absolute;
  background-color: white;
  padding: 10px;
  top: 5%;
  left: 10%;
}

У меня вопрос, как я могу добавить эту функцию в приведенный выше код?

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

Answer 1

Наверное, как-то так. Вы можете адаптировать это к своему коду. Вам необходимо вызвать функцию toggle в методе buttonHandler. Я добавил несколько комментариев, чтобы помочь вам.

let next = document.getElementById("next");
let previous = document.getElementById("previous");
let result = document.getElementById("result");

class ImageManager {
  constructor(imageElements, buttonPrevious, buttonNext, resultElement){
    if(imageElements.length === 0) return;
    this.imageElements = imageElements;
    this.sentinel = imageElements[0];
    this.index = 0;
    this.resultElement = resultElement;
    buttonPrevious.addEventListener("click", ()=>this.buttonHandler(-1), false);
    buttonNext.addEventListener("click", ()=>this.buttonHandler(1), false);

    this.resultElement.innerHTML = this.sentinel.innerHTML;
    
  }
  
  buttonHandler(val){
      this.index = (this.index+val+this.imageElements.length) % this.imageElements.length;
      this.sentinel = this.imageElements[this.index];
      this.resultElement.innerHTML = this.sentinel.innerHTML;
      //THIS IS WHERE YOU WANT TO CALL TOGGLE
      //this.sentinel is your clicked image. Just need to pass it to your toggle function as a parameter and use it.
  }
  
  
}

let images = document.querySelectorAll(".light-box");
let imageManager = new ImageManager(images, previous, next, result);

<div class="light-box">image1</div>
<div class="light-box">image2</div>
<div class="light-box">image3</div>
<div class="light-box">image4</div>
<div class="light-box">image5</div>
<div class="light-box">image6</div>
<div class="light-box">image7</div>
<button id="next">Next</button>
<button id="previous">Previous</button>
<div id="result"></div>