Fancybox - 通过 ajax 将更多图像添加到图库答案

【问题标题】：Fancybox - Add more images to gallery via ajaxFancybox - 通过 ajax 将更多图像添加到图库
【发布时间】：2014-01-04 13:45:02
【问题描述】：

我使用 JFK's 方法通过 Ajax 填充 Fancybox 2.1.5，而不是此处显示的元素 FancyBox get href for images via AJAX 这工作得很好，但问题是没有办法限制调用的记录数量。如果图库有 4000 张图像，则 Fancybox 需要很长时间才能加载。所以.. 我将SQL 查询限制为16 records。然后我使用条件和函数告诉fancybox 在到达当前组中的最后一条记录时检索接下来的16 条记录。问题是，它不会将新图像添加到组中。我正在使用JFK's 在这里回答Load next Images via Ajax and add to Fancybox 的方法使用$fancybox.group.push 添加到Fancybox 的组，这对我不起作用。

首先，这里是通过json 检索附加图像的jQuery 代码。变量pid 是数据库在检索接下来的 16 条记录时将开始的照片 ID。 a_id 是专辑。这个函数在我的其余代码所在的fancybox 的afterLoad 函数的inside 中被调用。发布所有内容太长了。当使用onclick();点击自定义下一个箭头时调用推送函数

function push(pid, a_id){

        var act = "thtr";
        var module = "photos";
        var push = 1;
        $.ajax({
            type: "POST",
            url: "/ajax.php",
            data: {"a_id": a_id, "act": act, "pid": pid, "push": push, "module": module},
            success: function(response){    
             var arrayObj = $.parseJSON(response);
             $.fancybox.group.push(arrayObj);
             alert($.fancybox.group.length);
             $.fancybox.next();
            }
        });
}

$fancy.group.push 不工作。我得到的 ajax 响应与第一次打开 fancybox 时的初始 ajax 响应相同，除了它是 16 条新记录。 json 响应的格式如下所示。顺便说一句，json 响应中有一些额外的项目用于其他事情，否则会被忽略，所以这不是问题。该组最初有 16 条记录，但在我运行 push 函数后，它会提醒 17 但没有任何变化。如果它拉另一个16 或者服务器响应的数量有多少，它应该提醒32。不知道为什么它不起作用。添加到组时找不到其他任何内容。

[{"href":"https:\/\/cdn1.mysite.com\/photos\/c5\/c7\/45\/c5c745a424b9a2f.jpeg","type":"image","pid":"77695","owner":"12219","purl":"https:\/\/mysite.com\/photo?per=12219&set=77695.15735&s=0","aurl":"\/view-photo_album-1jpIbSZgIsV.html","isDom":false},...etc]

更新

正在使用$.fancybox.group.push 更新该组，因为警报现在显示其中有 32 个对象。但由于某种原因，fancybox 没有更新，因为点击下一个循环而不是转到新图像。

更新2

如果我像这个例子一样手动将响应字符串写到函数中，推送就会起作用：

$.fancybox.group.push(
               { href: "images/04.jpg", type: "image", title: "Picture 04", isDom: false },
               { href: "images/05.jpg", type: "image", title: "Picture 05", isDom: false }
);

不知道为什么它不适用于这样的变量。它也来自响应。

$.fancybox.group.push(arrayObj);

【问题讨论】：

标签： jquery ajax json fancybox fancybox-2

【解决方案1】：

通过查看其他 JSON 响应问题，终于弄明白了。无论出于何种原因，使用变量的$.fancybox.group.push 方法似乎只有在使用$.each 遍历对象时才有效。希望这可以帮助其他想要完全 ajaxed Fancybox 的人。

这是我完成的功能。

function do_push(pid, a_id){

        var act = "thtr";
        var module = "photos";
        var gpush = 1;
        $.ajax({
            type: "POST",
            url: "/ajax.php",
            data: {"a_id": a_id, "act": act, "pid": pid, "push": gpush, "module": module},
            success: function(response){    
             var arrayObj = $.parseJSON(response);
             $.each(arrayObj, function(index){
                $.fancybox.group.push(arrayObj[index]);
             });
             $.fancybox.next();
            }
        });
}

【讨论】：

你应该像这样简单地改变 ajax dataType **dataType: "json" **

【解决方案2】：

如果您使用 Fancybox 2.x，只需使用此解决方案：

Json 响应

{"images":[{"href":"images/04.jpg","type":"image","title":"Picture 04","isDom":"false"}, {"href":"images/05.jpg","type":"image","title":"Picture 05","isDom":"false"}]}

Javascript 函数

function do_push(pid, a_id){
        var act = "thtr";
        var module = "photos";
        var gpush = 1;
        $.ajax({
            type: "POST",
            url: "/ajax.php",
            dataType: "json",
            data: {"a_id": a_id, "act": act, "pid": pid, "push": gpush,"module": module},
            success: function(response){    
                $.fancybox(response.images);
            }
        });
}

【讨论】：