Charger dynamiquement le contenu ajax sur fancybox à partir de la base de données MySQL

Ce que vous pourriez faire est d'obtenir les éléments à venir (liés) de votre base de données et de les stocker dans un json variable comme :

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

Puis push les éléments de cette variable dans la galerie dans le beforeLoad rappel comme :

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

Avis que nous utilisons un commutateur (le done variable) pour pousser les éléments une seule fois (nous devrons peut-être réinitialiser le commutateur après avoir fermé fancybox)

JSFIDDLE

REMARQUE :les éléments seront ajoutés (poussés) seulement après que nous ayons vu le dernier élément dans le DOM (le 4ème dans votre cas) donc si vous commencez à parcourir la galerie en arrière, vous ne verrez pas les nouveaux éléments mais jusqu'à la deuxième boucle.

Vous pouvez définir loop à false cependant