На своей странице я использую плагины Magnific Popup и Shuffle. Я загружаю новые элементы, как только пользователь достигает нижней части страницы. Что я хочу сделать, так это привязать свои новые элементы к Magnific Popup после их загрузки. Я попытался выполнить этот ответ Динамически добавлять элементы в галерею Magnific Popup но это не работает для меня.
Ниже код js, который я использую для этого. Во-первых, после загрузки страницы я использую этот код для настройки MP
// gallery mode
$('.gallery-item').magnificPopup({
gallery: {
enabled: true
},
mainClass: 'mfp-fade',
fixedContentPos: false,
type: 'image'
});
Затем, как только пользователь достигнет нижней части страницы, запросите файл JSON.
$.getJSON( "list-dir.php")
.done(function( data ) {
var diff = Object.keys(data).length - $(".item").length;
var NUM_TO_LOAD = diff > 10 ? 10 : diff;
if(Object.keys(data).length > $(".item").length){
for(var i = 0 ; i<= 10; i++) {
var el = data[$(".item").length];
if (el === undefined) { break; }
var name = el.substring(0,el.indexOf("_") );
var $item = $('<div class="item shuffle-item filtered" data-groups="photo" data-groups="photo"><a href="img/dresses/'+ el + '" class="gallery-item item-link" style="margin: 10px;"><div class="item-img" style="background-image: url(\'img\/dresses\/' + el + '\' )"></div><div class="item-overlay"><h5>'+ name +'</h5></div></a></div>');
//Shuffle update
$('.portfolio').append($item);
$('.portfolio').shuffle('appended', $item);
// get instance (after popup was opened)
var mfp = $.magnificPopup.instance;
// modify the items array (push/remove/edit)
mfp.gallery.push({
src: $item
});
mfp.updateItemHTML();
}
}
});