Как создать столько динамических элементов, сколько мы получили от PHP - PullRequest
Новая
       42

Как создать столько динамических элементов, сколько мы получили от PHP

0 голосов
/ 10 февраля 2020

На главной странице есть Галерея, при нажатии на изображение необходимо открыть слайд-шоу lightGallery с изображениями, найденными в каталоге 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));
?>

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");
        }
    });
});

Нам нужно создать столько же dynamicEl с переменными изображения / большого пальца, сколько мы получили xhr.imgCount

Чтобы получить что-то вроде этого: 

dynamicEl: [{
    "src": '...',
    'thumb': '...'
}, {
    'src': '...',
    'thumb': '...'
}, {
    'src': '...',
    'thumb': '...'
}, {
    'src': '...',
    'thumb': '...'
}]

1 Ответ

1 голос
/ 10 февраля 2020

внутри вашего JS кода вам необходимо обновить что-то вроде ниже: 

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

Итак, я использую и переменную temp dynamicEls и после l oop заполняя ее в правильном положении .

...