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 !