-7

I'm using <!--nextpage--> tag to split up the post content into multiple pages. My example post content looks like this:

<img src="1.jpg" alt=""/><!--nextpage-->
<img src="2.jpg" alt=""/><!--nextpage-->
<img src="3.jpg" alt=""/><!--nextpage-->
<img src="4.jpg" alt=""/>

I want to setup infinite scrolling so when a user scrolls down the page it'll load the next image/content of the post. Is there a way to do this? There are lots of tutorials on adding infinite scrolling to posts but they only load more posts where as I want to load more of the post content

  • And what have you tried? There is tons of stuff out there on how to set this up. – ngearing Aug 16 '16 at 3:04
  • @Nath there are lots of stuff but all of them are for loading more posts. What I want is to load the the next content of the post since it has been split up into multiple pages – Ruriko Aug 16 '16 at 3:14
  • Well this seems related to this. It would essentially be the same thing, but you would call your ajax on page scroll event instead of click. There would be a check for page length and event would fire when we reach x % of that page. – bynicolas Aug 16 '16 at 3:33
  • Use the a combination of a waypoints JS library with wordpress.org/plugins/json-rest-api. You're looking for a full AJAX+CSS solution. >>> When element is visible, fetch content and display. Pretty simple. – jgraup Aug 16 '16 at 4:03
  • 1
    See: imakewebthings.com/waypoints/api/waypoint – jgraup Aug 16 '16 at 4:11
1
+50

Your best bet is to use a combination of JS waypoint libraries with the WP Rest API.

When element is visible, fetch content and display. Pretty simple.

Instead of the <nextpage> you could also wrap this in a custom shortcode but this is primarily a JS problem, not really a WP issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.