title: Show next image from div when click button
body: <p>In a few words - I display posts inside WP Google Map Pro that allows to list posts. Therefore I cannot use any gallery that needs shortcode because plugin doesn't display shortcodes.</p>
  
  <p>I tried to create my own gallery based on pictures. Here is what it looks like more or less - this is sample:</p>
  
  <pre><code>&lt;div id="post_content"&gt;
  &lt;img src="image1.jpg" class="thumb" /&gt;
  &lt;img src="image2.jpg" class="thumb" /&gt;
  &lt;img src="image3.jpg" class="thumb" /&gt;
  &lt;/div&gt;
  
  &lt;div class="showimagediv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I use jquery to do that and it works fine:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('.thumb').on('click', function() {
          var img = $('&lt;img /&gt;', {src    : this.src,
                                  'class': 'fullImage'
                    });
  
          $('.showimagediv').html(img).show();
      });
  
          $('.showimagediv').on('click', function() {
          $(this).hide();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I can only show image and close it. But I wanted to make it look like lightbox with arrowx PREV NEXT. </p>
  
  <p>The question is:
  How can I do that? To load next image from the same div into the div "showimagediv" and replace image1 with image2? Is there any solution?</p>