Cargue dinámicamente contenido ajax en fancybox desde la base de datos MySQL

Lo que podría hacer es obtener los elementos (relacionados) que vienen de su base de datos y almacenarlos en un json variable como :

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

Luego push los elementos de esa variable en la galería dentro de beforeLoad devolución de llamada como:

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

Aviso que estamos usando un interruptor (el done variable) para presionar los elementos solo una vez (es posible que tengamos que restablecer el interruptor aunque después de cerrar fancybox)

JSFIDDLE

NOTA :los elementos se agregarán (empujarán) solo después de que veamos el último elemento en el DOM (el cuarto en su caso), por lo que si comienza a navegar por la galería hacia atrás, no verá los elementos nuevos sino hasta el segundo ciclo.

Es posible que desee configurar loop a false aunque