JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox" rel="gallery" href="http://farm6.static.flickr.com/5010/5329485292_03988f30b8_b.jpg" title="Image #1"><img src="http://farm6.static.flickr.com/5010/5329485292_03988f30b8_s.jpg" alt=""/></a>

<a class="fancybox" rel="gallery" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" title="Image #2"><img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_s.jpg" alt=""/></a>

JavaScript

var databaseResponse = [{
    href: "http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg",
    type: "image",
    title: "Image #3",
    isDom: false
}, {
    href: "http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg",
    type: "image",
    title: "Image #4",
    isDom: false
}, {
    href: "http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg",
    type: "image",
    title: "Image #5",
    isDom: false
}];

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