0
I have a little problem, I made a programming of portffolio blocks where when I press on loads more my ajax creates the other blocks of the database. However he is not pulling the style that the blocks that are already in html have, which would be the position Absolute and the top and left to stand next to each other. To make these style and animations use the 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>
Can mount a jsfiddle with css and etc?
– Felipe Assunção
I’ll put the site on the air and I’ll edit for you give a better look...
– kaiquemix
ta giving some problems I caught this plug here Isotope.metafizzy.com; css is caught by Isotope.pkgd.js
– kaiquemix