Infinity Scroll

You can show Unlimited no. of Portfolio Items on a Page using Infinity Scroll.

How to Use

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

    <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:

    <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>

Last Modified: June 2, 2020