Add “next” and “previous” buttons to dynamic Lightbox gallery

Question

I created a dynamic lightbox gallery and want to add "next" and "previous" feature. I have been trying for past couple of days but always been hitting a brick wall...

Here is my code (I will include everything so it will make more sense):

My gallery.php file included in the index.php. You can add images to the gallery by adding images to directory. I am assigning ID to each image. :

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

Keeping in mind progressive enhancement, here is my JS file:

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);

Here is the CSS file:

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%;
}

My question is, how can I add this feature to the above code?

I wish, I could keep the code I wrote, however, if this feature can't be achieved with this code, I am open to suggestions. If you need anymore information please let me know in comments.

Answer 1

Probably something like this. You can adapt this to your code. You need to call your toggle function in the buttonHandler method. I added some comments to help you out.

 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>