infinite Scroll with Magnific Popup callback

Question

I'm using Infinite scroll and Magnific Popup.

The popup works on the content which is 'page 1' but fails after that. I've attempted to use a callback for MagnificPopup within the infiniteScroll call.

$grid.infiniteScroll({
path: '.pagination__next',
append: '.grid__item',
outlayer: msnry,
status: '.page-load-status',
}, function( newElements ) {
  $('.open-pop').magnificPopup({
  type: 'inline',
  mainClass: 'mfp-fade',
  fixedContentPos: false,
   gallery: {
   enabled: true,
   navigateByImgClick: false,
   }
 });

 });

My question is similar to this Magnific popup and infinite scrolling, which I've unsuccessfully tried to implement.

Potentially an added complication is I'm using Masonry. This is my full code:

// init Masonry

var $grid = $('.grid').masonry({
 itemSelector: 'none', // select none at first
 columnWidth: '.grid__col-sizer',
 gutter: 26,
 percentPosition: true,
 stagger: 30,
 // nicer reveal transition
 visibleStyle: { transform: 'translateY(0)', opacity: 1 },
 hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

// get Masonry instance
var msnry = $grid.data('masonry');

// initial items reveal
$grid.imagesLoaded( function() {
$grid.removeClass('are-images-unloaded');
$grid.masonry( 'option', { itemSelector: '.grid__item' });
var $items = $grid.find('.grid__item');
$grid.masonry( 'appended', $items );
});

$grid.infiniteScroll({
path: '.pagination__next',
append: '.grid__item',
outlayer: msnry,
status: '.page-load-status',
}, function( newElements ) {
 $('.open-pop').magnificPopup({
 type: 'inline',
 mainClass: 'mfp-fade',
 fixedContentPos: false,
 gallery: {
  enabled: true,
  navigateByImgClick: false,
 }
});

});

Answer 1

Use onInit event for callback function.

onInit: function() { this.on( 'append', function() {...}) }