MagnificPopup и Ajax
 

Здравствуйте.
Есть галерея со всплывающими фотографиями на MagnificPopup, подключается так:

$(document).ready(function () {	
	$(".card-item").magnificPopup({
		delegate: 'a',
		type: 'image',

		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0, 1] 
		}
	});
})

Проблема в том, что в этой галереи есть кнопка "Загрузить еще", которая добавляет новые элементы аяксом (причем это сделано с помощью большого и сложного компонента pdoPage для MODX, а в его начинке трудно разобраться)... и, соответственно, эти новые элементы уже не попадают в галерею. Как быть?

Igorsrt,
новые элементы точно также проинициализировать, после их добавления на страницу.

да, в html все элементы выглядят одинаково (и те которые были изначально, и те которые аяксом добавляются)... насколько я понимаю, нужно как-то скрипт галереи перезапускать после аякса, что бы он заново ее формировал

Igorsrt,
$(".card-item").magnificPopup({}).addClass("old");
Ajax ...
$(".card-item:not(.old)").magnificPopup({}).addClass("old") ;

чувствую, что какая-то умная мысль у Вас... но понять не могу пока ((

код html:

<div class="project-cards" id="pdopage">

                <ul class="pagination" style="display: none;"><li class="page-item disabled"><a class="page-link" href="#">Первая</a></li><li class="page-item disabled"><a class="page-link" href="#">«</a></li><li class="page-item active"><a class="page-link" href="o-kompanii.html?page=1">1</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=2">2</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=3">3</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=2">»</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=3">Последняя</a></li></ul>
            <div class="rows row">
                        
                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/.jpg"><img src="/assets/images/resources/2/small/.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/-1.jpg"><img src="/assets/images/resources/2/small/-1.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/-2.jpg"><img src="/assets/images/resources/2/small/-2.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                   
    
    </div><div class="button--light text-center"><button id="moreProjects">Смотреть все проекты</button></div>
            </div>

разобрался