title: Image gallery with previous/next buttons displayed using xml and javascript ALMOST works
body: <p>I'm making an image gallery with all the thumbnails displayed to the left which, when clicked, will display on the right the image itself and previous/next buttons displayed as thumbnails of the previous/next images.</p>
  
  <p>The test page is <a href="http://bloogum.net/guildwarsv2/fireisles" rel="nofollow noreferrer">here</a> (view on desktop; mobile doesn't include this functionality), javascript is <a href="http://bloogum.net/guildwarsv2/fireisles/gallery.js" rel="nofollow noreferrer">here</a> and within the php document I have this code:</p>
  
  <pre><code>&lt;div class="gallery-desktop-thumbs" id="perditionrock"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      var x,xmlhttp,xmlDoc
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "perditionrock.xml", false);
      xmlhttp.send();
      xmlDoc = xmlhttp.responseXML; 
      x = xmlDoc.getElementsByTagName("scrn");
      div="";
      for (i = 0; i &lt;x.length; i++) { 
        div += "&lt;div class='thumbnail' onclick='displayIMG(" + i + ")' style='background-image:url(";
        div +=  x[i].getElementsByTagName("zone")[0].childNodes[0].nodeValue;
        div +=  "/t/"
        div +=  x[i].getElementsByTagName("photo")[0].childNodes[0].nodeValue;
        div += ".jpg);'&gt;&lt;/div&gt;";
      }
      document.getElementById("perditionrock").innerHTML = div;
  &lt;/script&gt;
  
  &lt;section id="gallery-desktop"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>It almost works! Clicking the thumbnail from the gallery functions perfectly. Clicking the previous/next thumbnails loads the previous/next image, but only in its own timestream, starting from the final image. The thumbnails and the previous/next don't work in concert.</p>
  
  <p>eg. If you scroll backwards through the images, say to image 10, then click image 15 in the thumbnails, image 15 loads with images 14 as the previous thumbnail and image 16 as the next. However, if you click the next thumbnail, it goes back to the previous/next stream and loads image 11.</p>
  
  <p>How do I make the previous/next link relative to the image that's already loaded?</p>
  
  <p>(Side note: I'm no code monkey, but I am trying to learn! If any solutions could also be explained as you give them, that'd be awesome. Thanks!)</p>