將下一個和上一個按鈕添加到 jQuery 圖像庫

Question

我已經使用 jQuery 制作了一個圖片庫（點擊圖片，它會在屏幕上顯得很大）。 因此，我想添加一個“下一個”和“上一個”按鈕來從視圖切換，基本上是在單擊時將圖像熒光筆中的 src 屬性替換為下一個或上一個圖像。 但這似乎不起作用。

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

我什至不確定next函數是否處於覆蓋數據的正確位置：

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

這個怎么樣？ 我最終讓上一個和下一個按鈕工作。

    [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;

      });

    });