Load more...

6 replies · opened Dec 11, 2022

MmschejbalDec 11, 2022

Hi,

I have a page based on blog-masonry.html and I want to split my blogs into two parts by using "Load more..."/Pagination button but I'm not sure how to implement it so I didn't use the Pagination button at this page for now. If you could please guide me which part of the code to use and in which place.

Thank you,
Maciek

SSemicolon WebSTAFFDec 12, 2022

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:
    [ch_pre]

    End of content
    No more pages to load

    Load more..
    [/ch_pre]

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:
    [ch_pre]

    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 );
         });
     });

    });
    [/ch_pre]

That's all! Hope this Helps!

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

MmschejbalDec 12, 2022

Hi,

I followed all your instructions but for some reason the reviews.html page still loads full content though I split the second part into reviews-2.html page. What am I missing??

https://daakaitours.com/reviews.html

Many thanks,
Maciek

SSemicolon WebSTAFFDec 12, 2022

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:
[ch_pre type="js"]$container.infiniteScroll({
path: '.load-next-posts',
history: false,
scrollThreshold: false,
status: '.page-load-status'
});[/ch_pre]

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.

MmschejbalDec 12, 2022

Yes, the reviews.html now shows the correct number of entries but there is no "Load more.." button...

SSemicolon WebSTAFFDec 12, 2022

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.

MmschejbalDec 12, 2022

Beautiful, thank you!
Best,
Maciek

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard