jQuery Fancybox on click event after ajax success shows no images

Question

In the success area of an ajax request I add an onClick eventListener via jQuery to open fancybox. The Object for the gallery is received and passed through an data-attribute.

jQuery.ajax({
    type: "post",
    dataType: "json",
    url: ajax_url,
    data: data,
    success: function( response ) {
        
        poi_images = '';
        if(poi_data['images'] !== undefined) {
            poi_gallery_class = 'poi-gallery';
            poi_images = JSON.stringify(poi_data['images']);
        }

        // [...]
        
        
        $('.poi-gallery').on('click', function() {

            gallery = $(this).attr('data-gallery');
            gallery = JSON.parse(gallery);

            console.log(gallery);

            $.fancybox.open(
                gallery, {
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    }
                },

            });
        });    
    }
});

The fancybox gallery opens, shows up the correct numbers of images in the gallery, but is not showing up any of the images. The Container is still empty, and the src of the fancybox image is still blank.

What I'm doing wrong?

Answer 1

Figured out that the key name for the image url hast to be named "src" instead of "href".