使用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

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

这解决了这个问题。无论如何，谢谢你的帮助。

Answer 2

您对包含图片的文件夹发出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（数据），如果什么都没有，将错误calback添加到ajax函数和console.log错误，或者在网络选项卡中查看浏览器控制台中的响应< / p>

修改

我认为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'>");
    }
});