如何创建尽可能多的动态El，就像我们从PHP收到的那样

Question

在主页上有图库，点击一个图像需要打开光画廊幻灯片与在ftp目录上找到的图像，与画廊名称点击主页上。

PHP用于查找图像并计数：

<?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));

?>

断续器：

$('.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");

        }

    });

});

我们需要使用图像/拇指变量创建尽可能多的动态El，就像我们收到 xhr.imgCount 一样

要获得类似这样的东西：

dynamicEl: [{

    "src": '...',

    'thumb': '...'

}, {

    'src': '...',

    'thumb': '...'

}, {

    'src': '...',

    'thumb': '...'

}, {

    'src': '...',

    'thumb': '...'

}]

Answer 1

在你的JS代码中，你需要更新如下内容：if (xhr.imgCount != 0) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(xhr.imgNormal);&nbsp; &nbsp; &nbsp; &nbsp; console.log(xhr.imgThumb);&nbsp; &nbsp; &nbsp; &nbsp; console.log(xhr.imgCount);&nbsp; &nbsp; &nbsp; &nbsp; var dynamicEls = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i <= xhr.imgCount; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dynamicEls[i] = {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "thumb": "/gallery/" + galleryName + "/" + galleryName + "_" + i + ".jpg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; dynamicEls.pop(); //For remove unrealized last url/data&nbsp; &nbsp; &nbsp; &nbsp; $(this).lightGallery({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dynamic: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dynamicEl: dynamicEls&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }因此，我正在使用和温度变量，并在循环后将其填充在正确的位置。dynamicEls