Опишу алгоритм решения
Эта функция формирует модальное окно
$(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>
$(".modal-name")
- не известно что это из верстки, Вы пытаетесь дотянуться до атрибута$(this).attr('data-img')
Вы уверены что он там есть у$(".modal-name")
?data-img
ровно так же как Вы сейчас передаете в phpsrc
это такой же атрибут просто для пользовательских данных