divに画像を表示してPREV/NEXTボタンを追加

Question

私はWordpressでギャラリーの種類を作成します。しかし、投稿はプラグインで表示されています（地図に添付されています - WP Googleマップ）ギャラリープラグインは使用できません。画像をアップロードしてdivに追加したいのです "showimagediv"これは正常に動作しますが、PREV/NEXTを作成することはできません。

これは、次のようになります。

$(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> 

それはうまく動作しますが、私に次/前のページにするためのオプションを与えるものではありません。

Answer 1

これはテストされていませんが、あなたの考えを手助けするかもしれません。

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"); 
})