Add Images Dynamically as we click the next and previous button using Jquery/Javascript

Question

Initially am showing 4 thumbnail images,

I want to add the next and previous button to the thumbnail images container ie div thumbs. And I want to write the functionality for it.

Can anyone please help me out.

HTML

<div id="gallery">
    <div id="overlay"></div>
    <div class="slidePanel">
        <div id="panel">
            <img id="largeImage" src="" />
        </div>
        <div class="slideBtn">
            <a href="#" id="next">

    <img src="images/left_arrow.png" /></a>
            <a href="#" id="prev"><img src="images/right_arrow.png" /></a>
        </div>
        <div id="close">
            <a href="#">Close</a>
        </div>
    </div>
    <div id="thumbs" align="center">
        <img src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
    </div>

</div>

JS

$(document).ready(function () {
    function loadSlide(nSlide) {
        $('#thumbs img.current').removeClass('current');
        $(nSlide).addClass('current');
        var src = $(nSlide).attr('src').replace('thumb', 'large');
        $("#largeImage").fadeOut(function () {
            this.src = src;
            $(this).fadeIn();
        }).center();
        $("#overlay").css({
            "opacity": "0.7"
        }).fadeIn("slow");
        $('#close a, #close').fadeIn();
        $('#prev, #next').css('display', 'block');
    }
    $('#next').click(function () {
        var cSlide = $('#thumbs img.current');
        if ($(cSlide).next('img').length > 0) var nSlide = $(cSlide).next('img');
        else var nSlide = $('#thumbs img:first');
        loadSlide(nSlide);
    });
    $('#prev').click(function () {
        var cSlide = $('#thumbs img.current');
        if ($(cSlide).prev('img').length > 0) var nSlide = $(cSlide).prev('img');
        else var nSlide = $('#thumbs img:last');
        loadSlide(nSlide);
    });
    $('#thumbs img').click(function () {
        loadSlide(this);
    });
    $("#panel").click(function () {
        $(this).fadeOut("slow");
        $("#overlay").fadeOut("slow");
    });
    $('#close a').click(function () {
        $(this).fadeOut('slow');
        $('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
        $("#thumbs").css('display', 'block');
    });
    $('#thumbs img').click(function () {
        $("#thumbs").css('display', 'none');
    });
});

Answer 1

Here is some of the relevant code that I once used to implement my own image gallery

function setImage(index){
   var thumbRight = $('.thumb'+(index+1));
   var thumbLeft = $('.thumb'+(index-1));

   var img = $('.img' + index);
   //set images and thumbs accordingly
}


$('.container').on('click', '.thumbTrigger', function(){
   var direction = $(this).is('.thumbRight') ? 1 : -1;
   var currIndex = //get index of current image in the list of images
   setImage(currIndex + direction);
});