javascript - 将 "next"和 "previous"按钮添加到动态灯箱画廊

Question

我创建了一个动态灯箱画廊并想添加“下一个”和“上一个”功能。过去几天我一直在尝试，但总是碰壁......

这是我的代码(我将包含所有内容，这样会更有意义):

我的gallery.php文件包含在index.php中。您可以通过将图像添加到目录来将图像添加到图库。我正在为每个图像分配 ID。 :

<?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

大概是这样的。您可以根据您的代码进行调整。您需要在 buttonHandler 方法中调用您的 toggle 函数。我添加了一些评论来帮助您。

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>