Use Magnific Popup with AJAX-loaded content

Author: BorislavZlatanovCreated May 16, 2017Updated Oct 20, 2025

Hi,

I have some content that is loaded through AJAX. Magnific doesn't work with that content because the event listeners fire on page load, but the the AJAX-loaded content is not yet inserted in the page at that point.

The only workaround for this that I know of is to use inline javascript on the AJAX-loaded content. I tried to do something like:

<a class="test-popup-link" href="path-to-image.jpg" onclick="magnificPopup({type: 'image'}).magnificPopup('open');">Open popup</a>

But unfortunately it doesn't seem to work. I get ReferenceError: magnificPopup is not defined, even though the magnific-popup.js file is included in the page.

Any help on how to get this to work would be appreciated. Thanks!

Source: dimsemenov/Magnific-Popup