title: Add "next" and "previous" buttons to dynamic Lightbox gallery
body: <p>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...</p>
  
  <p>Here is my code (I will include everything so it will make more sense):</p>
  
  <p>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. :</p>
  
  <pre><code>&lt;?php
  //function call
  return showImages();
  
  //function definition
  function showImages(){
    $out = "&lt;h1&gt;Image Gallery&lt;/h1&gt;";
    $out .= "&lt;ul id='images'&gt;";
    $folder = "img";
    $filesInFolder = new DirectoryIterator($folder);
    $imgnumber = 1;
    while ($filesInFolder-&gt;valid()){
      $file = $filesInFolder-&gt;current();
      $filename = $file-&gt;getFilename();
      $src = "$folder/$filename";
      $fileInfo = new Finfo( FILEINFO_MIME_TYPE );
      $mimeType = $fileInfo-&gt;file($src);
      if ($mimeType === 'image/jpeg'){
        $out.= "&lt;li&gt;&lt;img id='imgnumber$imgnumber' src='$src' /&gt;&lt;/li&gt;";
        $imgnumber = $imgnumber + 1;
      }
      $filesInFolder-&gt;next();
    }
  
    $out .= "&lt;/ul&gt;";
    return $out;
  }
  </code></pre>
  
  <p>Keeping in mind progressive enhancement, here is my JS file:</p>
  
  <pre><code>function init (){
    window.console.log("welcome newww user");
    var lightboxElements = "&lt;div id='lightbox'&gt;";
    lightboxElements += "&lt;div id='overlay' class='hidden'&gt;&lt;/div&gt;";
    lightboxElements += "&lt;img class='hidden' id='big-image' /&gt;";
    lightboxElements += "&lt;div id='navigation' class='hidden'&gt;";
    lightboxElements += "&lt;div id='next'&gt;Next&lt;/div&gt;&lt;div id='prev'&gt;Prev&lt;/div&gt;";
    lightboxElements += "&lt;/div&gt;";
    lightboxElements += "&lt;/div&gt;";
    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 &lt;li&gt; liElements
    while (i &lt; liElements.length){
      li = liElements[i];
      //set class='lightbox'
      li.setAttribute("class", "lightbox");
      image = li.querySelector("img");
      //register a click event handeler for the &lt;img&gt; Elements
      image.addEventListener("click", toggle, false);
      i += 1;
    }
  }
  
  document.addEventListener("DOMContentLoaded", init, false);
  </code></pre>
  
  <p>Here is the CSS file:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p><strong>My question is, how can I add this feature to the above code?</strong></p>
  
  <p>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. </p>