无限滚动与Magnific Popup回调 [英] infinite Scroll with Magnific Popup callback

问题描述

我正在使用无限滚动和Magnific弹出窗口。

I'm using Infinite scroll and Magnific Popup.

弹出窗口对内容为页面1的内容起作用，但在此之后失败。我试图在infiniteScroll调用中使用MagnificPopup的回调。

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,
   }
 });

 });

我的问题类似于 Magnific popup和无限滚动，我试图实现失败。

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,
 }
});

});

推荐答案

使用 onInit 回调函数事件。

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

这篇关于无限滚动与Magnific Popup回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！