I'm having a problem, I made a programming of portfolios blocks where when I press on loads more my ajax creates the other blocks of the database. However it is not pulling the style that the blocks that are already in the html have, which would be the absolute position and the top and left to stand side by side. To do these style and animations I use ISOTOPE.
CODE:
<script type="text/javascript">
var loadedImageCount, imageCount;
$(function() {
// GRID
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
horizontal: {
verticalAlignment: 0.5
}
});
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter button click
$('.filters-button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
var loadedImageCount, imageCount;
$('#add').click(function() {
// add new images
var items = getItems(function(html) {
$container.prepend($(html));
});
// use ImagesLoaded
$container.imagesLoaded()
.progress(onProgress)
.always(onAlways);
});
});
// ----- ----- //
// return doc fragment with
function getItems(callback, items, contador) {
if (!items) items = '';
if (typeof contador == 'undefined') contador = 6;
_getImageItem(function(html) {
items += html;
contador--;
if (contador == 0) callback(items);
else getItems(callback, items, contador);
});
}
// return an <li> with a <img> in it
function _getImageItem(_callback) {
var item = "";
jQuery.ajax({
url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
dataType: "json", //Tipo de Retorno
success: function(data) {
var pt1 = data.map(function(obj) {
return '<div class="element-item ' + obj.menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + obj.imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + obj.tipo + '"</h1><h2>"' + obj.nome + '"</h2></div></a></div></div></div>';
}).join('');
_callback(pt1); // <- aqui envias de volta para a callback da chamada da função
}
});
}
// triggered after each item is loaded
function onProgress(imgLoad, image) {
// change class if the image is loaded or broken
var $item = $(image.img).parent();
$item.removeClass('is-loading');
if (!image.isLoaded) {
$item.addClass('is-broken');
}
// update progress element
loadedImageCount++;
}
// hide status when done
function onAlways() {}
</script>