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

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

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.