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