Question

我使用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函数的里面，我的代码的其余部分是。{发布所有内容太长了。使用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响应格式如下。 BTW我在json响应中有一些额外的项目用于其他事情，否则将被忽略，这样就不会有问题。该组最初有16条记录，但在我运行push函数后，它会回复17，但没有任何变化。如果它引发了另一个32或服务器响应的次数，它应该提醒16。不知道为什么它不起作用。添加到组中时找不到任何其他内容。

[{"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没有更新，因为点击下一个循环而不是转到新图像。

UPDATE2

如果我手动将响应字符串写入函数中，则推送有效：

$.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迭代对象时才起作用。希望这可能会帮助其他想要完全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();
            }
        });
}

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

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

2 个答案: