Как передать через атрибут изображения?

Question

Есть массив с изображениями:

<?php if (!empty($images)): ?>
          <?php foreach($images as $img): ?>
          <?php 
            $name = pathinfo($img['filename'], PATHINFO_FILENAME);
            $ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
          ?>
          <img class="panzoom__content" src="/uploads/<?php echo $img['filename']; ?>" />
          <?php endforeach; ?>
        <?php endif; ?>

Как передать эти изображения в попап через атрибут data-img?

    <a href="#modal-order" data-toggle="modal" data-img=""></a>
<script>
  $(document).ready(function() {
  $(".modal-name").on("click", function() {
    $("#modal-img").attr('src', $(this).attr('data-img'));
  });
});
</script>

Answer 1

Опишу алгоритм решения

Эта функция формирует модальное окно

  $(document).ready(function() {
    $(".modal-name").on("click", function() {
      $("#modal-name").html($(this).data("name"));
      $("#modal-description").html($(this).data("description"));
      $("#modal-attr1").html($(this).data("attr1"));
      $("#modal-attr2").html($(this).data("attr2"));
      $("#modal-art").html($(this).data("art"));
      $("#modal-img").attr('src', $(this).attr('data-img'));
    });
  });

Изображение в модалке одно потому что запись только одна:

$("#modal-img").attr('src', $(this).attr('data-img'));

Для решения задачи, нужно найти все картинки в выбраном товаре

получить их src далее добавить в модальном окне соответствующее количество img c этими путями

В разметке должно быть несколько тегов пока что он один

Как найти изображения опираясь на кнопку Подробнее ($('.btn-more')[0] - первая из кнопок)

Array.from($('.btn-more')[0].parentNode.parentNode.querySelectorAll('.panzoom__content')).map(e => e.src)

Получим массив с путями:

Array(3) [ "/uploads/1655046147-3832192997.jpg", "/uploads/1655046147-551899804.jpg", "/uploads/1655046147-2827771717.jpg" ]

Далее пробежать по этому массиву, добавить в модалку все картинки (разумеется придется создать для них контейнер либо добавить слайдер - тут на выбор)

$(document).ready(function() {
    $(".modal-name").on("click", function() {
      const images=JSON.parse($(this).attr('data-img'));
      $('#mainCarousel').empty()
      $.each(images, function( i, val ) {
        $('#mainCarousel').append(`<p>${val}<p>`);
      });
      $('#modal').css("display", "flex");
    });
  });

.card {
  box-shadow: 2px 2px 2px 0px rgba(34, 60, 80, 0.2);
  width: 300px;
  padding: 10px;
}
.modal{
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px); 
  height: 200px;
  width: 200px;
  padding: 10px;
  background-color: blanchedalmond;
  box-sizing: border-box;
  box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal" class="modal">
  <div id=mainCarousel></div> 
  <button onclick="$(this.parentNode).css('display','none')" >закрыть</button>
</div> 

<div class="card">
  <div class="c-img">
    <p>зима</p>
    <p>весна</p>
    <p>лето</p>
    <p>осень</p>
  </div> 
  <button class="modal-name" data-img='["зима","весна","лето","осень"]'>
    подробнее...
  </button>
</div> 

<div class="card">
  <div class="c-img">
    <p>огонь</p>
    <p>вода</p>
    <p>земля</p>
    <p>воздух</p>
  </div>  
  <button class="modal-name" data-img='["огонь","вода","земля","воздух"]'>
    подробнее...
  </button>
</div>

БЛОГ НА HUSL

Как передать через атрибут изображения?

Ответы (1 шт):