Load more...

Hello,

Consider following the steps below:

1. Split your Posts into 2 or more Pages and name them with an ending number like reviews-2.html .

2. Use this code after the Posts Container:

<div class="page-load-status">
	<div class="css3-spinner infinite-scroll-request">
		<div class="css3-spinner-ball-pulse-sync">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<div class="alert alert-warning text-center infinite-scroll-last mx-auto" style="max-width: 20rem;">End of content</div>
	<div class="alert alert-warning text-center infinite-scroll-error mx-auto" style="max-width: 20rem;">No more pages to load</div>
</div>

<!-- Pagination
============================================= -->
<div class="text-center d-none">
	<a href="reviews-2.html" class="button button-3d button-dark button-large button-rounded load-next-posts">Load more..</a>
</div>

and make sure the .load-next-posts Button is on each Additional Post Page and has the proper next page url.

1. Add the following JS Codes at the bottom of the Page:

<script src="js/plugins.infinitescroll.js"></script>
<script>
	jQuery(window).on( 'load', function(){

		var $container = $('#posts');

		$container.infiniteScroll({
			path: '.load-next-posts',
			history: false,
			status: '.page-load-status'
		});

		$container.on( 'load.infiniteScroll', function( event, response, path ) {
			var $items = $( response ).find('#posts .entry');
			// append items after images loaded
			$items.imagesLoaded( function() {
				$container.append( $items );
				$container.isotope( 'insert', $items );
				setTimeout( function(){
					$container.isotope('layout');
					SEMICOLON.initialize.resizeVideos();
					SEMICOLON.widget.loadFlexSlider();
					SEMICOLON.widget.masonryThumbs();
				}, 1000 );
			});
		});

	});
</script>

That's all! Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We have just checked this out and it appears to be working fine for us. Simply replace your existing JS Code for the Infinity Scroll initialization with the following:

$container.infiniteScroll({
	path: '.load-next-posts',
	history: false,
	scrollThreshold: false,
	status: '.page-load-status'
});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Simply remove the .d-none Class from Button DIV Wrapper.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.