Hi, I've tried to modify the template a bit, so more k2 articles are loaded by an ajax "load more" button.
There is a post in the k2 forums about how to achieve that for k2 posts, but it needed some modifications in order to work with isotope. There was also a small error that was causing more problems to isotope than default k2. At least I think I've fixed it (I have no clue aoy jquery).
so you just add
<!-- AJAX load more btn --->
<div class="loadmorewrapper">
<a id="btn-show-more" href="<?php echo JRoute::_('&start=' . ( ($this->pagination->pagesCurrent) * $this->pagination->limit) ); ?>"><span class="icone"><i class="fas fa-plus-circle"></i></span></a>
</div>
before the closing </div> in category.php - in my case in the portfolio template.
Then after the closing </div> I've added
$ = jQuery;
var url = '?start=';
var itemsToFetch = 5;
var cursor = itemsToFetch;
var newsContainer = 'isotope';
var buttonEl = $('#btn-show-more');
buttonEl.on ('click', function(evt){
evt.preventDefault();
$.get( url + cursor, function( data ) {
var items = $(data).find(".itemContainer");
if ( items.children().length == 0) {
buttonEl.hide();
}
$( '#' + newsContainer ).append( items ).isotope('appended', items);
$( '#' + newsContainer ).imagesLoaded( function() {
$( '#' + newsContainer ).isotope('reLayout');
});
cursor += itemsToFetch
});
});
(itemsToFetch = 5 is the number of items that show each time and it has to corespond with the k2's pagination settings.)
This works as far as showing the extra items but the new images are overlapping the existing ones. From what I understand I have to use reLayout for isotope (called layout in the new version) to load the settings for the images. I do that, but the new images are not in the correct size, and so they are not placed correctly in the grid.
Is there anyone that could complete the modification?
Forum