0

I am have a single page Wordpress website using Jetpack Infinite scroll to load one post at a time. I am trying to get Magnific Popup to work after the ajax from the infinite scroll loads the posts after the first call.

I assume the best way to do this is to reinitialise the Magnific Popup so it can work after the ajax, success, perhaps with a callback somehow?

I have not had luck doing this yet even though there are quite a lot of posts online with the same problem, like this question (infinite Scroll with Magnific Popup callback), although I am unsure how to integrate this solution with Infinite Scroll from Jetpack.

Here is my call for the Magnific Popup call. Is there a way to run this again once the ajax loads the next post?

    $('.projectDocumentation').each(function() {
    $(this).magnificPopup({
        delegate: '.popPop',
        type: 'image',
        image: {
          titleSrc: 'caption',
          cursor: 'null', 
          verticalFit: true, 
        },
        gallery: {
          enabled:true,
          preload: [0,2], 
          navigateByImgClick: true,
          arrowMarkup: '<button type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
          tCounter: '<span class="mfp-counter-index">%curr%/%total%</span>'
        },
        disableOn: function() {
          if( $(window).width() < 600 ) {
            return false;
          }
          return true;
        }

    });
})

  • REVISED CODE BELOW

    $('#contentContainer').on("click", ".popPop", function(e) {
        e.preventDefault();
$(this).magnificPopup({
type: 'image',
image: {
  titleSrc: 'caption',
  cursor: 'null', 
  verticalFit: true,
},
gallery: {
  enabled:true,
  preload: [0,2], 
  navigateByImgClick: true,
  arrowMarkup: '<button type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
  tCounter: '<span class="mfp-counter-index">%curr%/%total%</span>'
},
}).magnificPopup('open');
})
R-G
  • 105
  • 2
  • 14
  • 1
    Have a look at this: Not sure but it may be what you're after. https://github.com/dimsemenov/Magnific-Popup/issues/778 or https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – user3080408 Aug 10 '18 at 22:12
  • @user3080408 thanks for the links, the github post helped a lot and the dynamically loaded posts can have the image open with the Magnific Popup. The only thing now is that the gallery doesnt work. Do you know how I can get the gallery to work? – R-G Aug 14 '18 at 13:40
  • I recommend you start another question with the exact gallery issues you are having. In the interest of users searching questions, we should consider this one answered. – user3080408 Aug 15 '18 at 11:56

0 Answers0