Изменить IMG SRC по клику JQuery

Question

У меня есть галерея изображений, когда я щелкаю один из элементов галереи, появляется всплывающее окно, каждый элемент имеет свой источник изображения. Я хотел бы сделать эту галерею динамической, поэтому, когда пользователь нажимает на элемент, изображение соответствующего элемента должно отображаться во всплывающем окне. Надеюсь, это не смущает, вот изображение, иллюстрирующее то, что я пытаюсь сказать:

И HTML:

<div class="gallery__flex">
        <div class="gallery__item">
          <img src="img/gallery-1.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-2.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-3.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-4.jpeg" alt="" class="gallery__img">
        </div>
      </div>
      <div class="gallery__flex">
        <div class="gallery__item">
          <img src="img/gallery-5.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-6.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-7.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-8.jpeg" alt="" class="gallery__img">
        </div>

  <!-- popup window -->

    <div class="popup">
      <img src="img/gallery-1.jpeg" alt="" class="popup__img">
      <span class="popup__close-icon" id="closeIcon">&times;</span>
    </div>

Как я могу сделать это с помощью Jquery?

Answer 1

Вы можете попробовать следующий код, когда вы нажимаете img, он показывает всплывающее окно img

$(document).ready(function(){
  
  
  $(".gallery__item>img").click(function(){
    var img = $(this).attr('src');
    $(".popup>img.popup__img").attr('src',img);
    $(".popup").show();
  });
  $("#closeIcon").click(function(){
    $(".popup").hide();
  });
  

});

.gallery__img{
  width:80px;
  height:80px;
  float:left;
}

.popup{
margin-top:10px;
width:100%;
float:left;
border:1px solid #ccc;
padding:10px;
box-sizing:border-box;
position:relative;
display:none;
}
.popup__img{
  width:80px;
  height:80px;
  left:0;
  right:0;
  top:0;
  display:block;
  margin:auto;
}
#closeIcon{
position:absolute;
right:0;
top:0;
z-index:1;
font-size:18px;
background:rgba(0,0,0,0.4);
color:#fff;
padding:2px;
box-sizing:border-box;
o
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="gallery__flex">
        <div class="gallery__item">
          <img src="https://cdn2.tgdd.vn/Products/Images/42/166247/samsung-galaxy-a8-star-2018-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn1.tgdd.vn/Products/Images/42/155261/oppo-f7-bac-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn3.tgdd.vn/Products/Images/42/84798/samsung-galaxy-j7-prime-hh-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn.tgdd.vn/Products/Images/42/154260/huawei-nova-3e-2-600x600.jpg" alt="" class="gallery__img">
        </div>
      </div>
      <div class="gallery__flex">
        <div class="gallery__item">
          <img src="https://cdn2.tgdd.vn/Products/Images/42/177047/samsung-galaxy-s9-tim-1-600x600.jpg" alt="" class="gallery__img">
        </div>
       </div>

  <!-- popup window -->

    <div class="popup">
      <img src="img/gallery-1.jpeg" alt="" class="popup__img">
      <span class="popup__close-icon" id="closeIcon">&times;  </span>
    </div>

Answer 2

Я сделал пример: https://codepen.io/dknacht/pen/dKaONp

Используйте функцию $ .prop для доступа к атрибуту источника и его изменения. Если вы свяжете изображение с событием щелчка, то src = $(this).prop("src") вернет источник.
Вам нужно будет установить источник, к изображению, во всплывающем окне как $("idToImageInPopup").prop("src", src).

$("img").click(function (){
  $("#imageDialog").prop("src", $(this).prop("src"))
  $("#dialog").dialog("open")
});