title: change to next image on click jquery html
body: <p>I'm doing a responsive website, originally on full screen, i will have a content section on the left consist of 10 thumbnails, on right is the main image(when you click on any thumbnail the main image will change to what thumbnail you clicked)</p>
  
  <p>On 320px width size, i removed all the thumbnails, and i want the picture(main image), to change to the next image upon each click.</p>
  
  <p>So i css display:none the thumbnails on 320px width screen, and then use jquery to check, if display:none = true, activate the main image to be clickable, but now i'm stuck on how i can change to the next image upon each click. I hope i can get some information on the most simplified code that i can understand since i'm not very good.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="sectionTwo_mainPic"&gt;
      &lt;img class="mainPic" src="highlight1.jpg"&gt;
      &lt;img class="mainPic" src="highlight2.jpg"&gt;
      &lt;img class="mainPic" src="highlight3.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>//if mainPic is clicked and thumbnail is not visible, change pic to next pic in order per click
  $('#sectionTwo_mainPic').on('click', function(){
      var test = $('.container #sectionTwo_thumbnail');
  
      if (! test.is(':visible')) {
          // not sure what to type here   
      }
  });
  </code></pre>
  
  <p>So basically,
  i click on image1, it hide and show image2, click and hide and show image3.. and so on
  Thanks</p>