<script>
$(document).ready(function() {
$(".modal-order").on("click", function() {
let images=JSON.parse($(this).attr('data-img'));
$('#yourSelector').empty(); // Очищаем содержимое попапа, потом запускаем итератор
$.each(images, function(i, val) {
$('<img>', {
id: 'yourImgId',
class: 'yourClass yourClass2 etc',
src: val
}).appendTo('#yourSelector');
});
});
});
</script>
<?php
if (!empty($images)){
foreach($images as $img){
$name = pathinfo($img['filename'], PATHINFO_FILENAME);
$ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
$imgArr[]='/uploads/'.$img['filename'];
}
}
?>
<a href="#modal-order" data-toggle="modal" data-img='<?php echo json_encode($imgArr); ?>' class="modal-name">
<div class='btn-more'>Подробнее</div>
</a>
<?php
$images=[ "/uploads/1655046147-3832192997.jpg", "/uploads/1655046147-551899804.jpg", "/uploads/1655046147-2827771717.jpg" ];
?> //просто как пример, не знаю как и откуда вы получаете массив
<a href="#modal-order" data-toggle="modal" data-img='/uploads/<?php json_encode($images); ?>' ></a>
<script>
$(document).ready(function() {
$(".modal-order").on("click", function() {
let images=JSON.parse($(this).attr('data-img'));
$.each(images, function(i, val) {
$('<img>', {
id: 'yourImgId',
class: 'yourClass yourClass2 etc',
src: val
}).appendTo('#yourSelector');
});
});
});
</script>
Совершенно неочевиден на самом деле. В некоторых случаях архитектура с толстым клиентом предпочтительнее использования тонкого клиента. Например, построение n-мерных кубов данных при n>3 или значительной выборке. Если вы нагрузите этим СУБД, то первые же 1-3 запроса уложат ее наглухо, а если СУБД крутится на том же сервере, что и http, то ляжет все. Поэтому, может быть и так, и сяк, и толстый клиент, и тонкий. Архитектуру надо выбирать исходя из решаемой задачи, а не из религиозных соображений)
ЗЫ
Т.к. стоит задача , то речь как раз, походу, идет о кубах данных, так что тут вполне может быть оправдано использование толстого клиента. Выборку делать на сервере, а обработку - в клиенте.