Indlæs ajax-indhold dynamisk på fancybox fra MySQL-databasen

Hvad du kan gøre er at hente de kommende (relaterede) elementer fra din database og gemme dem i en json variabel som :

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

Så push elementerne fra denne variabel ind i galleriet i beforeLoad tilbagekald som :

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

Bemærk at vi bruger en switch (den done variabel) for at skubbe elementerne kun én gang (vi skal muligvis nulstille omskifteren efter lukning af fancybox dog)

JSFIDDLE

BEMÆRK :elementerne tilføjes (skubbes) først efter, at vi ser det sidste element i DOM (det 4. i dit tilfælde), så hvis du begynder at gennemse galleriet baglæns, vil du ikke se de nye elementer, men indtil den anden løkke.

Du ønsker måske at indstille loop til false dog