Fancybox - Add more images to gallery via ajax

Question

I used JFK's method for populating Fancybox 2.1.5 via Ajax instead of elements as shown here FancyBox get href for images via AJAX This works quite nicely but the problem is there is no way to limit the amount of records called. If the gallery has 4000 images it will take a long time for Fancybox to load. So.. I limited my SQL query to 16 records. Then I use a condition and function to tell fancybox to retrieve the next 16 records when it hits the last one in the current group. Problem is, it won't add the new images to the group. I'm using a method also JFK's answer here Load next Images via Ajax and add to Fancybox to add to Fancybox's group using the $fancybox.group.push which isn't work for me.

First, here is the jQuery code to retrieve the additional images via json. the variable pid is the photo id that the database will start at when retrieving the next 16 records by the way. a_id is the album. This function is being called inside of fancybox's afterLoad function where the rest of my code is. It was too long to post all of it. The push function is called when the custom next arrow is clicked using 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();
            }
        });
}

The $fancy.group.push is not working. The ajax response I get is the same as the initial ajax response when fancybox is first opened except it's 16 new records. The json response is formatted like below. BTW there are a few extra items in the json response that I use for other things, which is ignored otherwise so that's not a problem. The group initially has 16 records but after I run the push function, it alerts back 17 but nothing changed. It should alert back 32 if it pulled another 16 or however many the server responds with. Not sure why it's not working. Can't find anything else on adding to a group.

[{"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]

UPDATE

The group is being updated using $.fancybox.group.push as an alert is showing 32 objects in it now. But for some reason, fancybox is not being updated because hitting next loops over instead of going to the new image.

UPDATE2

The push works if I manually write out the response string into the function like this example:

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

Not sure why it won't work with the variable like this. It has too come from the response.

$.fancybox.group.push(arrayObj);

Answer 1

Finally figured it out looking at other JSON response questions. For whatever reason using the $.fancybox.group.push method using a variable only seems to work if you iterate through the object with $.each. Hopefully this might help someone else out who wants a fully ajaxed Fancybox.

Here is my completed function.

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