Dynamisch laden van ajax-inhoud op fancybox vanuit de MySQL-database

Wat je zou kunnen doen is de komende (gerelateerde) items uit je database halen en ze opslaan in een json variabele zoals :

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

Dan push de items van die variabele in de galerij binnen de beforeLoad terugbellen zoals:

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

Opmerking dat we een schakelaar gebruiken (de done variabele) om te duwen de items slechts één keer (mogelijk moeten we de schakelaar resetten na het sluiten van fancybox echter)

JSFIDDLE

OPMERKING :de items worden pas toegevoegd (gepusht) nadat we het laatste item in de DOM hebben gezien (de 4e in jouw geval), dus als je achteruit door de galerij bladert, zie je de nieuwe items pas in de tweede lus.

Misschien wil je loop . instellen naar false hoewel