向動態燈箱畫廊添加“下一個”和“上一個”按鈕

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>