Загрузите следующие изображения через Ajax и добавьте в Fancybox

Моя проблема в том, что у меня большая галерея, которую не следует загружать полностью при первой загрузке страницы. Поэтому я загружаю 10 из 50 изображений и добавляю к ним fancybox. Когда пользователь нажимает следующую кнопку, 11-е изображение должно быть загружено через Ajax и добавлено в контейнер галереи.

Проблема в том, что fancybox останавливается на 10-м изображении, потому что он не знает динамических загрузок.

Как я могу добавить динамически загруженные изображения в fancybox2?

в настоящее время у меня есть это:

function loadFancybox() {
    $('a.lightbox').fancybox({
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(0,0,0,0.8)'
                }
            }
        },

        beforeLoad: function() {
            this.title = $(this.element).data('title');
            ajaxGetNextImages();
            loadFancybox();
        },
        loop: false
    });
}
loadFancybox();

ajaxGetNextImages() получит следующие изображения :)

после этого я вызываю loadFancybox (), чтобы все новые изображения принадлежали галерее. Но они не включены, пока я не открою fancybox ...

Ответы на вопрос(2)

Ваш ответ на вопрос