title: javascript image gallery query (next image)
body: <p>This is my first time on stackoverflow, I really hope someone can help. I'm fairly novice at coding, so I hope my query is simple to solve. 
  I have created a simple javascript image gallery, where if you click on the left or right arrow it loops to show the next image in my array list. I also have quicklinks that jump to the specific images in this list. How can I get my next/back links to then continue on, to show the next image from the one currently selected? E.g if I have jumped to gallery image 3, for it to then show the next image along from it in the list gallery image 4, and not gallery image 2.</p>
  
  <p>Below are samples of my code. </p>
  
  <p>Thanks so much in advance for your help.</p>
  
  <p><strong>Here is my script:</strong></p>
  
  <pre><code>var num=0;
  
  imgArray = [
    ['../00_assets/gallery/work_00.jpg','Gallery', '1 of 6',],
    ['../00_assets/gallery/work_01.jpg','Gallery', '2 of 6',],
    ['../00_assets/gallery/work_02.jpg','Gallery', '3 of 6'],
    ['../00_assets/gallery/work_03.jpg','Gallery', '4 of 6'],
    ['../00_assets/gallery/work_04.jpg','Gallery', '5 of 6'],
    ['../00_assets/gallery/work_05.jpg','Gallery', '6 of 6'],
  ]
  
  function slideshow(slide_num) {
    document.getElementById('mypic').src=imgArray[slide_num][0];
    document.getElementById('mypic').alt=imgArray[slide_num][1];
    document.getElementById('number').innerHTML=imgArray[slide_num][2];
  }
  
  function slideshowUp() {
    num++;
    num = num % imgArray.length;
    slideshow(num);
  }
  
  function slideshowBack() {
    num--;
    if (num &lt; 0) {num=imgArray.length-1;}
    num = num % imgArray.length;
    slideshow(num);
  }
  </code></pre>
  
  <p><strong>Here is my HTML <em></strong>(I've taken out the bits that do not seem relevant)<strong></em>:</strong></p>
  
  <pre><code>  &lt;div align="left"&gt;
      &lt;!--  First image in array list is here  --&gt;
      &lt;img src="../00_assets/gallery/work_00.jpg" id="mypic" name="mypic" alt="Gallery"&gt;
  
          &lt;!--  Previous link is here  --&gt;
  &lt;a href="#" onclick="slideshowBack(); return false;"&gt; ← &lt;/a&gt;
  
          &lt;!--  First image number is here  --&gt;
    &lt;div id="number"&gt;1 of 9&lt;/div&gt;
  
          &lt;!--  Next link is here  --&gt;
  &lt;a href="#"  onclick="slideshowUp(); return false;"&gt; → &lt;/a&gt;
  
          &lt;!--  Three quicklinks are link is here  --&gt;
  &lt;a href="#" onclick="slideshow(0); return false;"&gt;Quicklink 1&lt;/a&gt; | 
  &lt;a href="#" onclick="slideshow(2); return false;"&gt;Quicklink 2&lt;/a&gt; | 
  &lt;a href="#" onclick="slideshow(4); return false;"&gt;Quicklink 3&lt;/a&gt; | 
  </code></pre>
  
  <p>Thank you so much.</p>