Infinity Scroll

Portfolio Infinite Scroll

Infinite scroll loads the next set of portfolio items automatically as the visitor reaches the bottom, or on a Load more button. Canvas wires this with the InfiniteScroll plugin working alongside the isotope grid.

Structure

Use the standard portfolio grid with .grid-container. After the grid, add a .page-load-status element for the loading spinner and a Load more link that points at the next page.

<div id="portfolio" class="portfolio row grid-container g-0" data-layout="fitRows">

    <article class="portfolio-item ...">
        <div class="grid-inner">
            <div class="portfolio-image">...</div>
            <div class="portfolio-desc">
                <h3><a href="portfolio-single-gallery.html">Morning Dew</a></h3>
                <span><a href="#">Icons</a>, <a href="#">Illustrations</a></span>
            </div>
        </div>
    </article>

</div><!-- #portfolio end -->

<!-- Loading status -->
<div class="page-load-status hovering-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>

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

Initialization

The behaviour is set up with a small script that binds InfiniteScroll to .grid-container, uses the Load more link as both the path and the button, and appends new .portfolio-item elements into the isotope grid once their images have loaded.

<script>
    jQuery(window).on( 'load', function(){
        var $container = jQuery('.grid-container');

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

        $container.on( 'load.infiniteScroll', function( event, response, path ) {
            var $items = jQuery( response ).find('.portfolio-item');
            $items.imagesLoaded( function() {
                $container.append( $items );
                $container.isotope( 'insert', $items );
                setTimeout( function(){
                    $container.isotope('layout');
                    SEMICOLON.Core.runModules();
                }, 1000 );
            });
        });
    });
</script>

How it works

path and button both point at .load-next-portfolio, so the same link defines where the next page lives and acts as the manual trigger.
scrollThreshold: false disables auto load on scroll so items load on button click; set a pixel value to auto load near the bottom instead.
On each load, new .portfolio-item elements are extracted from the response, appended, and inserted into isotope with isotope('insert', ...), then re laid out.
SEMICOLON.Core.runModules() re initializes Canvas plugins on the freshly added items so lightboxes and hover effects work.

Options

path: selector or URL pattern for the next page of items.
button: selector of the Load more element.
scrollThreshold: false for button only, or a pixel distance from the bottom to auto load.
history: whether to update the browser URL as pages load.
status: selector of the .page-load-status element that shows the loading spinner.
.load-next-portfolio: the class on the next page link used by path and button.
.page-load-status: the loading indicator container; add .hovering-load-status for the overlay style spinner.

Tips

Point the Load more link at the real next page HTML, for example portfolio-infinity-scroll-2.html, so the plugin can fetch and parse it.
Wait for images with imagesLoaded before inserting into isotope, otherwise the masonry layout can miscalculate heights.
Always call isotope('layout') and SEMICOLON.Core.runModules() after appending so the grid reflows and new items get their plugins.
Set scrollThreshold to a pixel value if you prefer automatic loading as the user nears the bottom instead of a button click.

How to Use

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

Was this page helpful?