使用 ajax 填充一个联合画廊

Question

您好，我目前正在尝试使用 ajax 来填充一个联合图库，但是该图库只是挂着一个加载图标，没有显示任何图像，请提供任何帮助，不胜感激

Ajax

$('document').ready(function () {
    var folder = "http://localhost/client%20side%20web%20coursework/files/";

    jQuery("#gallery").unitegallery();

    $.ajax({
        url: folder,
        asynch: false,
        cache: false,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    $("#gallery").append("<img alt='uploaded file' src='" + folder + val + "'data-image='" + folder + val + "'data-description='uploaded file by user'>'");
                }
            });
        }
    });
});

div 我们正在尝试填充

<div id="gallery" style="display:none;">
</div>

不熟悉 unite gallery 的文档可以在这里找到 http://unitegallery.net/index.php?page=documentation#installing_the_gallery

任何帮助将不胜感激

Answer 1

您向包含您的图像的文件夹发出 ajax 请求？是否有 index.php 或 index.html 返回 html？你的 .append 参数中有一些无用的附加引号，试试这个：

$("#gallery").append("<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>");

并在 ajax 响应后执行 console.log(data)，如果你什么都没有，将错误回调添加到你的 ajax 函数和 console.log 错误，或在网络选项卡的浏览器控制台中查看响应

编辑

我认为 jQuery .find 函数不接受任何回调参数，您可以使用 .each 函数：

var $gallery = $("#gallery");
$(data).find("a").each(function(i, el) {
    var val = $(el).attr('href');
    if (val.match(/\.(jpe?g|png|gif)$/)) {
        $gallery.append("<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>");
    }
});

Answer 2

$('document').ready(function(){
    var folder = "http://localhost/client%20side%20web%20coursework/files/";
    $.ajax({
        url : folder,
        asynch : false,
        cache : false,
        success: function (data) {
            var $gallery = $("#gallery");
            var imgsToAppend = '';
            $(data).find("a").each(function(i, el) {
                var val = $(el).attr('href');
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    imgsToAppend+="<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>";
                }
            });
            if(imgsToAppend){
                $gallery.append(imgsToAppend);
            }
            $gallery.unitegallery();
        }
    });
});

这解决了问题。无论如何感谢您的帮助。

使用 ajax 填充一个联合画廊

populating a unite gallery using ajax

html

javascript

ajax

jquery

image-gallery