0

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

<?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>
10
  • не совсем понятен вопрос, ну допустим в php мы формируем img тэги (зачем там переменные которые не используются, только загружают вопрос, ну да ладно) потом на клиенте по клику $(".modal-name") - не известно что это из верстки, Вы пытаетесь дотянуться до атрибута $(this).attr('data-img') Вы уверены что он там есть у $(".modal-name")? Commented 13 июн. 2022 в 17:32
  • @DaniilLoban он там есть. Мне нужно просто передать в data-img этот код php. Я так понимаю, его можно как-то сделать в одну строку, чтобы вставить в data-img? Commented 13 июн. 2022 в 18:27
  • я не уверен что понимаю вопрос но можно передать data-img ровно так же как Вы сейчас передаете в php src это такой же атрибут просто для пользовательских данных Commented 13 июн. 2022 в 18:42
  • возможно, будет лучше если Вы простыми словами опишете то что хотите сделать, потому что из того что сейчас написано понятно мало, иначе Вам бы давно дали ответ Commented 13 июн. 2022 в 18:43
  • @DaniilLoban я пробовал передавать <?php echo $img['filename']; ?>, но тогда передаётся только одно изображение, а их там несколько Commented 13 июн. 2022 в 18:52

1 ответ 1

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>

3
  • Здравствуйте! Но тогда получается, что в попап вставляются все изображения из массива, а нужны только те, которые относятся к конкретной карточке товара Commented 29 июн. 2022 в 20:28
  • разумеется, нужно искать в диве отвечающем за товар у каждого товара есть кнопка подробнее - от нее и нужно плясать Commented 29 июн. 2022 в 20:35
  • поможете за вознаграждение? Commented 29 июн. 2022 в 20:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.