在 div 中显示图像并添加 PREV/NEXT 按钮

Question

I create kind of gallery in Wordpress. However, posts are listed with plugin (they are attached to map - WP Google Map) and I can't use any gallery plugin. I just upload images and want to add them to div "showimagediv". This works fine but I can't make PREV/NEXT.

This is what it looks like:

$(document).ready(function() {
  $('.thumb').on('click', function() {
    var img = $('<img />', {
      src: this.src,
      'class': 'fullImage'
    });
    $('.showimagediv').html(img).show();
  });

  $('.showimagediv').on('click', function() {
    $(this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_content">
  <img src="image1.jpg" class="thumb" />
  <img src="image2.jpg" class="thumb" />
  <img src="image3.jpg" class="thumb" />
</div>
<div class="post_content">
  <img src="image4.jpg" class="thumb" />
  <img src="image5.jpg" class="thumb" />
  <img src="image6.jpg" class="thumb" />
</div>
<div class="post_content">
  <img src="image7.jpg" class="thumb" />
  <img src="image8.jpg" class="thumb" />
  <img src="image9.jpg" class="thumb" />
</div>

It works well but doesn't give me option to to PREV/NEXT.

Answer 1

This is untested - but might help you get the idea.

HTML

<div class="nextSelector">
    <span>NEXT</span>
</div>

JS

$('.nextSelector').on('click',function(){
    var nextImage = $('img.fullImage + img');
    $('img.fullImage').toggleClass("thumb fullImage");
    nextImage.toggleClass("thumb fullImage");
})