将下一个和上一个按钮添加到 jQuery 图像库

Question

I've made an image gallery using jQuery (click on the image and it appears big on the screen). Hence I wanted to add a 'next' and 'prev' button to switch from view, basically replacing the src attribute from the image highlighter with the next or previous image when clicked. But this doesn't seem to be working.

<div class="row">
        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-1.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-2.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-3.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/hand-rose55.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/ROSE-BLACK.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/rose-blgr.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>
    </div>
        <div class="photo-size">
            <a href="#" class="close">CLOSE</a>
            <div class="image-viewer"></div>
            <a href="#" class="next">NEXT</a>
            <a href="#" class="prev">PREV</a>
           </div>

I'm not even sure if the next function is in the right position for overwriting the data:

$( document ).ready(function() {
    $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");
        var src = $(this).attr('src');
        const block = $(".image-viewer");
        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
        $('.next').click(function(ev){
            ev.preventDefault();
            var src = $(this).parent().next().find('img').attr('src');
            alert(src);
        });
    });

    $('.close').click(function (ev) {
        ev.preventDefault();
        $('.image-viewer').empty()
        $(".photo-size").css("display", "none");
    });

});

Answer 1

How about this? I eventually got the prev and next buttons working.

    [https://codepen.io/newschapmj1/pen/WNbZOYy][1]
  $(document).ready(function () {
      //newimg1 - temp copy of img1
      var img1, newimg1;
      const block = $(".image-viewer");

      $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");

        //$('div.newgallery').empty();  //empty destination
        img1 = $(this);
        console.log('click img1', img1);

        var src = $(this).attr('src');

        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
      });

      $('.next').click(function (ev) {

        ev.preventDefault();

        newimg1 = $(img1).parent().next().children();

        if (newimg1.length > 0) {
          // image found
          $(block.empty());
          $(newimg1).clone().appendTo(block);

          $(block).addClass('highlighted-img');
          img1 = newimg1;
        }
        else {
          //no image - so do nothing
        }

      });

      $('.prev').click(function (ev) {

        ev.preventDefault();

        newimg1 = $(img1).parent().prev().children();

        if (newimg1.length > 0) {
          // image found
          $(block.empty());
          $(newimg1).clone().appendTo(block);

          $(block).addClass('highlighted-img');
          img1 = newimg1;
        }
        else {
          //no image - so do nothing
        }

      });


      $('.close').click(function (ev) {
        ev.preventDefault();

        $(block).removeClass('highlighted-img');
        $(block.empty());

        $(".photo-size").css("display", "none");
        img1 = null;
        newimg1 = null;

      });

    });