Ajax type loading post content + Gallery mode

[quentin-th]

Hello,

on a page displaying posts on a list, I would like to use magniufic popup to load the post content (.flower-item) in a popup. I managed to load what I needed in ajax, however I can't manage the gallery part, does magnific popup allow to use ajax and gallery mode at the same time or not ?

My structure is something ike that (Wordpress website) :

<div  class="month-wrapper">
    <div data-href="/link-to-flower-single-post" class="flower-item ajax-popup-link">
        <img src="">>
        <h3>Flower name</h3>
    </div>
    <div data-href="/link-to-flower-single-post" class="flower-item ajax-popup-link">
        <img src="">>
        <h3>Flower name</h3>
    </div>
</div>
<div  class="month-wrapper">
    <div data-href="/link-to-flower-single-post" class="flower-item ajax-popup-link">
        <img src="">>
        <h3>Flower name</h3>
    </div>
    <div data-href="/link-to-flower-single-post" class="flower-item ajax-popup-link">
        <img src="">>
        <h3>Flower name</h3>
    </div>
</div>

And here is the JS working but without gallery mode enabled

jQuery('.ajax-popup-link').on('click', function (e) {
    jQuery.magnificPopup.open({
        items: {
            type: 'ajax',
            src: jQuery(this).data('href')
        },
        callbacks: {
          parseAjax: function(mfpResponse) {
            mfpResponse.data = jQuery(mfpResponse.data).filter('.fleur-modal-body');
            console.log('Ajax content loaded:', mfpResponse);
          },
          ajaxContentAdded: function() {
            // Ajax content is loaded and appended to DOM
            console.log(this.content);
          }
        }
    });
});

Now, if I'm adding the gallery mode, it output an error "Uncaught TypeError: c.split is not a function".

I suppose the problem is src because when I console.log it's undefined, I tried replacing by src: jQuery(".div.flower-item").data('href') or something but same problem, I can't target my data-href, any idea how ? Or should I change something on the html structure ?

jQuery('.month-wrapper').each(function() {
    //console.log(jQuery(this));

    jQuery(this).magnificPopup({
        delegate: 'div.flower-item',
        items: {
            type: 'ajax',
            src: jQuery(this).data('href')
        },
        gallery: {
            enabled: true 
        },
        callbacks: {
            parseAjax: function(mfpResponse) {
                console.log('test');
                mfpResponse.data = jQuery(mfpResponse.data).filter('.fleur-modal-body');

                console.log('Ajax content loaded:', mfpResponse);
            },
            ajaxContentAdded: function() {
                // Ajax content is loaded and appended to DOM
                console.log(this.content);
            }
        }
    });
});

Thanks !