divをクリックすると次の画像が表示されます

Question

いくつかの言葉で - 私はWP Google Map Proの中に投稿を表示し、投稿を表示できます。したがって、プラグインはショートコードを表示しないため、ショートコードが必要なギャラリーは使用できません。

写真に基づいて私自身のギャラリーを作成しようとしました。ここでは、多かれ少なかれのように見えるものである - これはサンプルです：

<div id="post_content"> 
<img src="image1.jpg" class="thumb" /> 
<img src="image2.jpg" class="thumb" /> 
<img src="image3.jpg" class="thumb" /> 
</div> 

<div class="showimagediv"></div> 

私はそれを行うためにjqueryのを使用して、それが正常に動作します：

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

しかし、私は画像のみを表示し、それを閉じることができます。しかし、私はそれをarrowx PREV NEXTのライトボックスのように見せたいと思っていました。

質問は： どうすればいいですか？同じdivの次の画像をdiv "showimagediv"に読み込み、image1をimage2に置き換えるには？解決策はありますか？

Answer 1

私はあなたがこのために探していると思う：

$(document).ready(function() { 
 

 
    $(".showimagediv").html($("img").eq(0).clone()) 
 
    var pos = 0; 
 
    $('#prev').on('click', function() { 
 
     if(pos>0) pos-- 
 
      $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow"); 
 
    }); 
 

 
    $('#next').on('click', function() { 
 
     if(pos<2) pos++ 
 
     $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow"); 
 
    }); 
 
    
 
    $('.showimagediv').on('click', function() { 
 
     $(this).hide(); 
 
    }); 
 
});

.img1{ 
 
width: 50px; 
 
height: 50px; 
 
} 
 
.img2{ 
 
width: 70px; 
 
height: 70px; 
 
} 
 
.img3{ 
 
width: 90px; 
 
height: 90px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="post_content"> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img1" /> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img2" /> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img3" /> 
 
</div> 
 
<button id="prev">Prev</button> 
 
<button id="next">Next</button><br><br> 
 
<span></span> 
 
<div class="showimagediv"></div>