How to to create as much dynamicEl, as we received from PHP - php

Question

On main page have Gallery, on click a image need open lightGallery slideshow with images that found on ftp directory, with gallery name that clicked on main page.
PHP for finding images and count it:
<?php
header("Content-Type: application/json");
$dirname = $_POST["galleryName"];
$imgGallery = glob("../gallery/" . $dirname . "/".$dirname."_*.*");
$thumbGallery = glob("../gallery/" . $dirname . "/thumb_*.*");
$countImages = count($imgGallery);
echo json_encode(array("imgNormal" => $imgGallery, "imgThumb" => $thumbGallery, "imgCount" => $countImages));
?>
JS:
$('.info').click(function() {
var galleryName = $(this).closest('.imgGallery').find('img.img-thumbnail').attr('name');
$.ajax({
url: "gallery/imgFinder.php",
dataType: "json",
type: "post",
data: {
galleryName: galleryName
},
success: function(xhr) {
if (xhr.imgCount != 0) {
console.log(xhr.imgNormal);
console.log(xhr.imgThumb);
console.log(xhr.imgCount);
for (var i = 1; i <= xhr.imgCount; i++) {
$(this).lightGallery({
dynamic: true,
dynamicEl: [{ //We need to create as much as we received w "xhr.imgCount"
"src": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg",
"thumb": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg"
}]
})
return;
}
} else {
console.log('Gallery \'' + galleryName + '\' has no images');
return;
}
},
error: function(xhr) {
console.error("Some error found");
}
});
});
We need to create as much dynamicEl with image/thumb variables, as we received xhr.imgCount
To get something like this:
dynamicEl: [{
"src": '...',
'thumb': '...'
}, {
'src': '...',
'thumb': '...'
}, {
'src': '...',
'thumb': '...'
}, {
'src': '...',
'thumb': '...'
}]

Answer 1

inside your JS code you needs to be updated something like below:
if (xhr.imgCount != 0) {
console.log(xhr.imgNormal);
console.log(xhr.imgThumb);
console.log(xhr.imgCount);
var dynamicEls = [];
for (var i = 0; i <= xhr.imgCount; i++) {
dynamicEls[i] = {
"src": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg",
"thumb": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg"
};
}
dynamicEls.pop(); //For remove unrealized last url/data
$(this).lightGallery({
dynamic: true,
dynamicEl: dynamicEls
});
}
So, I am using and temp variable dynamicEls and after the loop filling it in correct position.