Fancybox-通过ajax向图库添加更多图片

Question

我使用JFK的方法通过Ajax填充Fancybox 2.1.5，而不是通过Ajax填充图像的元素，如图所示这样做效果很好，但问题是无法限制调用的记录数量。如果画廊有4000张图片，Fancybox将需要很长时间才能加载。所以…我将我的SQL查询限制为16 records。然后，我使用一个条件和函数来告诉fancybox，当它命中当前组中的最后一条记录时，检索接下来的16条记录。问题是，它不会将新图像添加到组中。我在这里使用的方法也是JFK的答案通过Ajax加载下一个图像，并添加到Fancybox中，使用$fancybox.group.push添加到Fancy box的组中，这对我不起作用。

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

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

Answer 1

最后通过查看其他JSON响应问题找到了答案。无论出于何种原因，使用$.fancybox.group.push方法(使用变量)似乎只有在使用$.each迭代对象时才有效。希望这能帮助其他想要一个完全精简的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();
}
});
}

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