Привет! Есть сайт, на сайте подключён плагин Justified Gallery, который создаёт горизонтальную сетку масонри и заполняет всю страницу картинками так. Под картинками в самом конце расположена кнопка "Показать ещё", при нажатии на которую аяксом подгружаются ещё картинки, с первой страницей всё работает, но при подгрузки новых картинок происходит вполне логичная вещь - плагин их не выравнивает, потому что при загрузке дерева dom этих элементов не было. Но это я так сам догадываюсь, может я и не прав. Как быть? Что делать? Сижу над этой проблемой уже 3 дня. Пробовал .on, но какой тип обработчик указывать? Ведь read - не поддерживается в нём (вставлял 'load' -реакции ноль), пробовал запускать плагин повторно через ajaxSetup, где вызывал эту функцию в complete - тоже ноль. Как быть? Помогите! А то уже крыша едет от этой фигни.
Аякс запрос:
$.ajax({
url:ajaxurl, // обработчик
data:data, // данные
type:'POST', // тип запроса
success:function(data){
if( data ) {
$('.image').append(data); // вставляем новые посты
current_page++; // увеличиваем номер страницы на единицу
if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
} else {
$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
}
}
});
Подключение плагина на странице:
$('.image').justifiedGallery({
rowHeight : 300,
margins : 5,
captions: false
});
Html-код элемента где выводятся картинки (с первой порцией картинок, к которым подгружаются другие):
<div class="image justified-gallery" style="height: 450px;">
<a href="#content-pupop" data-popup="44" class="item" style="width: 755px; height: 450px; top: 0px; left: 0px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-7_b.jpg" alt="" style="width: 755px; height: 500px; margin-left: -377.5px; margin-top: -250px;"></a>
<a href="#content-pupop" data-popup="41" class="item" style="width: 332px; height: 450px; top: 0px; left: 760px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-5.jpg" alt="" style="width: 332px; height: 501px; margin-left: -166px; margin-top: -250.5px;"></a>
<a href="#content-pupop" data-popup="39" class="item" style="width: 330px; height: 450px; top: 0px; left: 1097px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-4.jpg" alt="" style="width: 330px; height: 498px; margin-left: -165px; margin-top: -249px;"></a>
</div>
<div id="true_loadmore">Загрузить ещё</div>