image description on next/prev button

Question

Hi a newbie here can someone help with this problem i'm having with the image decscription of my image gallery, when the thumbnail is clicked the description shows up but when using the next and previous button i can't get it to show `//image click

$('.pic img').on("click", function(){
  
    
    img_index = $(this).parent().index();
    $('.pic img').css('border', 'none');
    $(this).css('border','2px solid #4f4f4f');

    $('pic').css('marginLeft', '0')
    $(this).parent().css('marginLeft', '3px');
      
    image_address = $(this).attr('src');
    list = image_address.split('/', 4);
    name = list[3];

    $('#display img').fadeOut(150, function() {
        
        $('#display').html("<img class='display_img'  src='img/photography/" + name + "'> ");
     

            $('#display img').fadeOut(0);
            $('#display img').fadeIn(150);
           

    });
    $(".img_caption").children().remove();
    $(this).next('#caption').fadeIn().appendTo('.img_caption');
    $('#thumbs').hide();
    

});`

this is the previous button

// previous button

$('body').on('click', '#left', function(){

    if (img_index == 0) {

        img_index = $('.pic').last().index();
        
    }
    else{

        img_index = img_index - 1;

    }

    

    
    image_address = $('.pic').eq(img_index).find('img').attr('src');
    list = image_address.split('/', 4);
    name = list[3];

    $('#display img').fadeOut(150, function () {

        $('#display').html("<img class='display_img'  src='img/photography/" + name + "'> ");

        $('#display img').fadeOut(0);
        $('#display img').fadeIn(150);

    });

    $('#display').html("<img class='display_img'  src='img/photography/" + name + "'> ");

    $('.pic img').css('border', 'none');
    $('.pic').eq(img_index).find('img').css('border', '2px solid #4f4f4f');

    $('pic').css('marginLeft', '0')
    $('.pic').eq(img_index).css('marginLeft', '3px');
    

});

this is the next button // next button

$('body').on('click', '#right', function () {

    var last_index =  $('.pic').last().index();

    if (img_index == last_index) {

        img_index = $('.pic').first().index();

    }
    else {

        img_index = img_index + 1;

    }




    image_address = $('.pic').eq(img_index).find('img').attr('src');
    list = image_address.split('/', 4);
    name = list[3];

    $('#display img').fadeOut(150, function () {

        $('#display').html("<img class='display_img'  src='img/photography/" + name + "'> ");

        $('#display img').fadeOut(0);
        $('#display img').fadeIn(150);

    });
    
    $('#display').html("<img class='display_img'  src='img/photography/" + name + "'> ");

    $('.pic img').css('border', 'none');
    $('.pic').eq(img_index).find('img').css('border', '2px solid #4f4f4f');

    $('pic').css('marginLeft', '0')
    $('.pic').eq(img_index).css('marginLeft', '3px');
    $(".img_caption").children().remove();
    

});

and this is the html
<div class="gallery-wrapper">
                    <div class="gallery">
                        <div id="thumbs">
                            <div class="pic item-1">
                                <img src="img/photography/thumbs/1.jpg" alt="" class="photo">
                                <div id="caption">This is image 1</div>
                            </div>
                             <div class="pic medium">
                                <img src="img/photography/thumbs/2.jpg" alt="" class="photo">
                                <div id="caption">This is image 2</div>
                            </div>
                            <div class="pic tall">
                                <img src="img/photography/thumbs/3.jpg" alt="" class="photo">
                                <div id="caption">This is image 3</div>
                            </div>
                            <div class="pic medium">
                                <img src="img/photography/thumbs/4.jpg" alt="" class="photo">
                                <div id="caption">This is image 4</div>
                            </div>
                            <div class="pic medium">
                                <img src="img/photography/thumbs/5.jpg" alt="" class="photo">
                                <div id="caption">This is image 5</div>
                            </div>

Answer 1

In below code i have change id to class because you cannot have mutliple ids with same name.Then, to get the value of caption i have use $('.pic').eq(img_index).find("div.caption").html() which will give us the description of that particular image only.

Demo Code :

 var img_index = 0; $('body').on('click', '#left', function() { if (img_index == 0) { img_index = $('.pic').last().index(); } else { img_index = img_index - 1; } image_address = $('.pic').eq(img_index).find('img').attr('src'); list = image_address.split('/', 4); name = list[3]; $('#display img').fadeOut(150, function() { //added direct src $('#display').html("<img class='display_img' src='" + image_address + "'> "); $('#display img').fadeOut(0); $('#display img').fadeIn(150); }); $('.pic img').css('border', 'none'); $('.pic').eq(img_index).find('img').css('border', '4px solid #18a6ed'); $('pic').css('marginLeft', '0') $('.pic').eq(img_index).css('marginLeft', '5px'); $(".img_caption").children().remove(); //get text which is in caption div var text = $('.pic').eq(img_index).find("div.caption").html() //add that to img_caption $(".img_caption").html(text).fadeIn(); }); $('body').on('click', '#right', function() { var last_index = $('.pic').last().index(); if (img_index == last_index) { img_index = $('.pic').first().index(); } else { img_index = img_index + 1; } image_address = $('.pic').eq(img_index).find('img').attr('src'); list = image_address.split('/', 4); name = list[3]; $('#display img').fadeOut(150, function() { //directly add default image $('#display ').html("<img class='display_img' src='" + image_address + "'> "); $('#display img').fadeOut(0); $('#display img').fadeIn(150); }); $('.pic img').css('border', 'none'); $('.pic').eq(img_index).find('img').css('border', '4px solid #18a6ed'); $('pic').css('marginLeft', '0') $('.pic').eq(img_index).css('marginLeft', '5px'); $(".img_caption").children().remove(); //get text var text = $('.pic').eq(img_index).find("div.caption").html() //add to div $(".img_caption").html(text).fadeIn(); });

 img { height: 55px; width: 55px; }.img_caption { font-size: 18px; color: #cc216b; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="gallery-wrapper"> <div class="gallery"> <div id="thumbs"> <div class="pic item-1"> <img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" alt="" class="photo"> <:--use class instead of id--> <div class="caption">This is image 1</div> </div> <div class="pic medium"> <img src="https.//i.pinimg.com/originals/e8/c7/c4/e8c7c4d4e14a9e3b21faf3d7b37c5b03:jpg" alt="" class="photo"> <div class="caption">This is image 2</div> </div> <div class="pic tall"> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn%3AANd9GcSrDI8z4T_iPTd3IzpxW_LPGeUPT3uVXwU4tA&usqp=CAU" alt="" class="photo"> <div class="caption">This is image 3</div> </div> <div class="pic medium"> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn%3AANd9GcTSkV92iBu84ig7ZueStpC8o1iX-8HEjcTXmw&usqp=CAU" alt="" class="photo"> <div class="caption">This is image 4</div> </div> <div class="pic medium"> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn%3AANd9GcQEKkDxUl8wQXOgpZG7nRBfPL4Yu0O-ZTR_bw&usqp=CAU" alt="" class="photo"> <div class="caption">This is image 5</div> </div> </div> </div> <br/> <h3> ----Here Image will be Shown --- </h3> <div id="display"> <.--default start from 1--> <img src="https.//i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg"> </div> <div class="img_caption">This is image 1</div> <button id="left">Prev</button> <button id="right">Next</button>