title: Move through lightbox images using arrow keys based upon current image selection?
body: <p>My question is slightly different because I can't seem to find an answer on the internet similar. All the other posts I can find presume that you will click the first image first which doesn't seem very flexible.</p>
  
  <p>My current js code for my lightbox is:</p>
  
  <pre><code>var current = 0;
  $(document).keydown(function(e)
  {
      e.preventDefault(); //prevent default arrow key behavior
  
          switch (e.which)
          {
              case 37:
                  $('.lb-prev')[current--].click();
                  break;
  
              case 39:
                  $('.lb-next')[current++].click();
                  break;
  
              case 27:
                  $('.lb-close')[0].click();
                  break;
          }   
  });
  </code></pre>
  
  <p>However this presumes that the image that you are looking at is the first image (0). If you click on the 15th image and run it through, this js code will override and go to (1) if you click the right arrow - the second image.</p>
  
  <p>The easiest way to show what I mean is probably through the development website. I need to figure a way to target the image that is the current url. The website is: rootsandshoots.byethost4.com</p>
  
  <p>For example, if I click the fourth image, the url is <a href="http://rootsandshoots.byethost4.com/#image-4" rel="nofollow">http://rootsandshoots.byethost4.com/#image-4</a>. Based upon it being the 4th image, I need the javascript to be able to recognise this and increment from the 4th image upwards (or downwards if back arrow pressed) not the 1st image. I evidently need to set the 'current' variable to something but I can't figure out what.</p>
  
  <p>The HTML for each image is set out like this: </p>
  
  <pre><code>&lt;li&gt;
  &lt;a href="#image-2"&gt;
      &lt;img src="img/gallery/thumbs/2.jpg" alt=""&gt;
      &lt;span&gt;+&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="lb-overlay" id="image-2"&gt;
      &lt;a href="#page" class="lb-close"&gt;x Close&lt;/a&gt;
      &lt;img data-src="img/gallery/2.jpg" /&gt;
      &lt;p class="caption"&gt;ACM – putting together food parcels&lt;/p&gt;
      &lt;a href="#image-1" class="lb-prev"&gt;&lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href="#image-3" class="lb-next"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>UPDATE:</p>
  
  <p>I've now changed the JS code to this and it works perfectly going backwards and the value decrements by 1 every time, but the value going forwards (right arrow) is jumping images by 2?</p>
  
  <pre><code> $(document).keydown(function(e)
  {
  var currentURL = (document.URL);
  var current = currentURL.split("-")[1];
  
          switch (e.which)
          {
              case 37:
                  $('.lb-prev')[--current].click();
                  break;
  
              case 39:
                  $('.lb-next')[current++].click();
                  break;
  
              case 27:
                  $('.lb-close')[0].click();
                  break;
          }
  });
  </code></pre>