Infinity Scroll

How to Use

• Add the Following Code after the Portfolio #portfolio Container:

  Copy

  <div id="load-next-posts" class="center">
  	<a href="portfolio-infinity-scroll-2.html" class="button button-full button-dark button-rounded">Load more...</a>
  </div>

  Note: Make sure you create a page with name portfolio-infinity-scroll-2.html & place the next Set of Portfolio Items in it. Then the next set will have the name portfolio-infinity-scroll-3.html and so on..

• Script for Infinity Scroll:

  Copy

  <script type="text/javascript">
  
  	jQuery(window).load(function(){
  
  		var $container = $('#portfolio');
  
  		$container.isotope({ transitionDuration: '0.65s' });
  
  		$('#portfolio-filter a').click(function(){
  			$('#portfolio-filter li').removeClass('activeFilter');
  			$(this).parent('li').addClass('activeFilter');
  			var selector = $(this).attr('data-filter');
  			$container.isotope({ filter: selector });
  			return false;
  		});
  
  		$('#portfolio-shuffle').click(function(){
  			$container.isotope('updateSortData').isotope({
  				sortBy: 'random'
  			});
  		});
  
  		$(window).resize(function() {
  			$container.isotope('layout');
  		});
  
  		$container.infinitescroll({
  			loading: {
  				finishedMsg: '<i class="icon-line-check"></i>',
  				msgText: '<i class="icon-line-loader icon-spin"></i>',
  				img: "images/preloader-dark.gif",
  				speed: 'normal'
  			},
  			state: {
  				isDone: false
  			},
  			nextSelector: "#load-next-posts a",
  			navSelector: "#load-next-posts",
  			itemSelector: "article.portfolio-item"
  		},
  		function( newElements ) {
  			$container.isotope( 'appended', $( newElements ) );
  			var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 );
  			SEMICOLON.widget.loadFlexSlider();
  			SEMICOLON.portfolio.arrange();
  		});
  
  	});
  
  </script>