If I understand your question correctly, it is as serakfalcon mentioned but I'll add in tumblr specific points. You need to do three things specifically. I won't go into too much tumblr template codes and styling it and stick to these
- Loading the data dynamically
- Dynamically creating a new section/page
- Getting the navigation to work with new sections
Loading the data
This is actually the easy bit. For tumblr, as you mentioned, we can manually go to the next page by clicking the "next page" link. In tumblr this will look something like
{block:NextPage}
<li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li>
{/block:NextPage}
Since the pages are on the same domain, we can override the link to get the page using AJAX. We will be getting the raw HTML for this page. Which will include all the other parts of the page like the three other sections. There may be some tumblr template magic that we can do to limit this, but I'll consider that outside the scope. So how do we get the content specifically? We can feed the raw HTML into jquery for it to build document objects, and we can then select the content that has the post from there. So something like.
$(document.body).on('click',".static",function(e){ //delegated
var xhr=$.get($(this).attr("href"),function(a){ //a is next page's HTML
$loaded=$(a); //loaded now has a temporary object with next page's objects
var postsHTML=$loaded.find("#posts").html() //contains posts we can embed
//what to find depends on your template. I used the default id="posts"
})
})
Creating a new section/page
Once we have the data, we now need to put the data into a new page. There's many ways on doing this but here's how I did it. First of all, I had a template for the new section. I put it in a script tag like so. I kind of like the semantics of doing it like this.
<script type="text/x-template" id="section-template">
<div class="section">
<div class="posts"></div>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li><a href="#section2">3</a></li>
<li><a href="#section4">4</a></li>
<li><a href="#" class="last-page">Back</a></li>
<li><a href="#" class="next-page static">Next</a></li>
</ul>
</div>
</script>
With that done, whenever the data is loaded we can get the raw HTML from this, and create a the new elements by feeding it to jQuery again. We then append the posts to the div with class posts. We also get the next page link from the data to attach to the next-page link so that the earlier ajax call will work. If we can't find the next-page link, that means there's no more posts. So we can hide the next-page link. We'll also stop the existing link to load data through ajax and do the normal slidey thing. Finally we'll append the new section to the parent div of the sections, fix it's width and then transition to the new section.
$(document.body).on('click',".static",function(e){ //deferred
e.preventDefault();
var that=this //to refer inside $.get callback
var xhr=$.get($(this).attr("href"),function(a){
$(that).removeClass('static') //stop this link from loading again
var $loaded=$(a)
var next_section=$($("#section-template").html()); //make the new section
var num_sections=$(".section").length + 1 //number of sections
next_section.addClass(num_sections%2 ? "white" : "black") //consistency
//find .posts in the new section and put the tumblr data in it
next_section.find(".posts").html($loaded.find("#posts").html())
//tumblr next page link. change according to template
var next_link=$loaded.find(".static")
if(next_link.length){ //if next link exists
//attach href to next page link in new section
next_section.find(".static").attr("href",next_link.attr("href"))
} else { //no next
//hide the next page link in new section
next_section.find(".static").hide()
}
$("#horizontal-scroller").append(next_section); //append to body
$("#horizontal-scroller").width(4000*num_sections); //resize body
$('html, body').stop().animate({ //to the new section
scrollLeft: $(next_section).offset().left
}, 1000);
}) //$.get
}) //click
Getting the navigation to work
I probably should append new links to the nav, but I guess to make it easier (and imagine how it look like with 40 pages) I decided to just use a "next page" and "last page" for the loaded content. The code is simple. For next page, if it's not .static, move to the next section and ditto last page. we'll delegate (technically, I'm using .on() but the docs on .delegate seemed easier to understand) it to the document body so that it works for all the new links.
So as a whole javascript/jquery will look something like
$(document.body)
.on('click','ul.nav a:not(.next-page):not(.last-page)',function(e){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
e.preventDefault();
})
.on('click',".next-page:not(.static)",function(e){ //next page not static
e.preventDefault()
$('html, body').stop().animate({
scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
}, 1000);
})
.on('click',".last-page",function(e){ //last page
e.preventDefault()
$('html, body').stop().animate({
scrollLeft: $(this).closest(".section").prevAll(".section").offset().left
}, 1000);
})
.on('click',".static",function(e){
e.preventDefault();
var that=this
var xhr=$.get($(this).attr("href"),function(a){
$(that).removeClass('static')
var $loaded=$(a)
var next_section=$($("#section-template").html());
var num_sections=$(".section").length + 1
next_section.addClass(num_sections%2 ? "white" : "black")
next_section.find(".posts").html($loaded.find("#posts").html())
var next_link=$loaded.find(".static")
if(next_link.length){
next_section.find(".static").attr("href",next_link.attr("href"))
} else {
next_section.find(".static").hide()
}
$("#horizontal-scroller").append(next_section); //append to body
$("#horizontal-scroller").width(4000*num_sections); //resize body
$('html, body').stop().animate({
scrollLeft: $(next_section).offset().left
}, 1000);
}) //$.get
}) //click
Here's a live demo of it working. Didn't really bother with making the slides look nice but hopefully you found this helpful.
