Динамично зареждане на ajax съдържание във fancybox от MySQL база данни

Това, което можете да направите, е да вземете идващите (свързани) елементи от вашата база данни и да ги съхраните в json променлива като :

var databaseResponse = [{
    href: "path/image05.jpg", // 4 are visible on page so
    type: "image",
    title: "Image #5",
    isDom: false
}, {
    href: "path/image06.jpg",
    type: "image",
    title: "Image #6",
    isDom: false
}, {
    href: "path/image07.jpg",
    type: "image",
    title: "Image #7",
    isDom: false
}]; // etc

След това push елементите от тази променлива в галерията в рамките на beforeLoad обратно извикване като :

var done = false; // initialize switch
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // loop : false, // optional
        beforeLoad: function () {
            // here get next items from database 
            // and store them in a json variable
            // e.g. "databaseResponse"
            if ((this.index == this.group.length - 1) && !done) {
                for (var i = 0; i < databaseResponse.length; i++) {
                    this.group.push(databaseResponse[i]);
                };
                done = true; // push items only once
            }
        },
        afterClose: function () {
            done = false; // reset switch
        }
    });
}); // ready

Забележка че използваме превключвател (done променлива) за натискане елементите само веднъж (може да се наложи да нулираме превключвателя след затваряне на fancybox обаче)

JSFIDDLE

ЗАБЕЛЕЖКА :елементите ще бъдат добавени (избутани) само след като видим последния елемент в DOM (4-тия във вашия случай), така че ако започнете да разглеждате галерията назад, няма да видите новите елементи, но до втория цикъл.

Може да искате да зададете loop на false все пак