javascript - How can I load the content of tumblr nextPage on indexPage -
i'm developing tumblr theme personal portfolio, i'm encountering serious problem in work section, want create horizontal slider effect, when click next see older posts,
like this:
http://tympanus.net/tutorials/websitescrolling/
i have define nextpage, #section4 have posts of work:
<!-- next page --> {block:nextpage} <div> <a id="next-button" href="{nextpage}#section4" class="next panel" style="position:relative; top:630px; left:1550px;">next</a> </div> {/block:nextpage} <!-- / next page --> well, defined open other page:
"indexpage".tumblr.com#section4 when click next goes to:
"indexpage".tumblr.com/page/2#section4 is there way can slide effect on index page or @ least give illusion, i'm making slide effect, when moving other page?
if understand question correctly, serakfalcon mentioned i'll add in tumblr specific points. need 3 things specifically. won't go tumblr template codes , styling , stick these
- loading data dynamically
- dynamically creating new section/page
- getting navigation work new sections
loading data
this easy bit. tumblr, mentioned, can manually go next page clicking "next page" link. in tumblr like
{block:nextpage} <li></li><a href="{nextpage}" class="next-page static">{lang:next page}</a></li> {/block:nextpage} since pages on same domain, can override link page using ajax. getting raw html page. include other parts of page 3 other sections. there may tumblr template magic can limit this, i'll consider outside scope. how content specifically? can feed raw html jquery build document objects, , can select content has post there. like.
$(document.body).on('click',".static",function(e){ //delegated var xhr=$.get($(this).attr("href"),function(a){ //a next page's html $loaded=$(a); //loaded has temporary object next page's objects var postshtml=$loaded.find("#posts").html() //contains posts can embed //what find depends on template. used default id="posts" }) }) creating new section/page
once have data, need put data new page. there's many ways on doing here's how did it. first of all, had template new section. put in script tag so. kind of semantics of doing 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 done, whenever data loaded can raw html this, , create new elements feeding jquery again. append posts div class posts. next page link data attach next-page link earlier ajax call work. if can't find next-page link, means there's no more posts. can hide next-page link. we'll stop existing link load data through ajax , normal slidey thing. we'll append new section parent div of sections, fix it's width , transition 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 link loading again var $loaded=$(a) var next_section=$($("#section-template").html()); //make new section var num_sections=$(".section").length + 1 //number of sections next_section.addclass(num_sections%2 ? "white" : "black") //consistency //find .posts in new section , put tumblr data in next_section.find(".posts").html($loaded.find("#posts").html()) //tumblr next page link. change according template var next_link=$loaded.find(".static") if(next_link.length){ //if next link exists //attach href next page link in new section next_section.find(".static").attr("href",next_link.attr("href")) } else { //no next //hide next page link in new section next_section.find(".static").hide() } $("#horizontal-scroller").append(next_section); //append body $("#horizontal-scroller").width(4000*num_sections); //resize body $('html, body').stop().animate({ //to new section scrollleft: $(next_section).offset().left }, 1000); }) //$.get }) //click getting navigation work
i should append new links nav, guess make easier (and imagine how 40 pages) decided use "next page" , "last page" loaded content. code simple. next page, if it's not .static, move next section , ditto last page. we'll delegate (technically, i'm using .on() docs on .delegate seemed easier understand) document body works new links.
so whole javascript/jquery 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 body $("#horizontal-scroller").width(4000*num_sections); //resize body $('html, body').stop().animate({ scrollleft: $(next_section).offset().left }, 1000); }) //$.get }) //click here's live demo of working. didn't bother making slides nice found helpful.
Comments
Post a Comment