Comment puis-je charger le contenu de tumblr nextPage sur indexPage

Si je comprends bien votre question, c'est comme un serakfalcon mentionné, mais je vais ajouter des points spécifiques au tumblr. Vous devez faire trois choses en particulier. Je n'entrerai pas dans trop de codes de modèle tumblr et je le classerai et je m'en tiendrai

1. Chargement dynamique des données
2. Créer dynamiquement une nouvelle section / page
3. Faire en sorte que la navigation fonctionne avec de nouvelles sections

Chargement des données

C'est en fait le bit facile. Pour tumblr, comme vous l'avez mentionné, nous pouvons passer manuellement à la page suivante en cliquant sur le lien "page suivante". Dans tumblr, cela ressemblera à

 {block:NextPage} <li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li> {/block:NextPage} 

Puisque les pages sont sur le même domaine, nous pouvons annuler le lien pour obtenir la page en utilisant AJAX. Nous allons obtenir le HTML brut pour cette page. Ce qui inclura toutes les autres parties de la page comme les trois autres sections. Il peut y avoir une magie de modèle tumblr que nous pouvons faire pour limiter cela, mais je considérerai cela hors de la portée. Alors, comment obtenons-nous le contenu en particulier? Nous pouvons alimenter le HTML brut dans jquery pour qu'il crée des objets de document, et nous pouvons ensuite sélectionner le contenu qui contient la publication. Donc quelque chose comme ça.

 $(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" }) }) 

Création d'une nouvelle section / page

Une fois que nous avons les données, nous devons maintenant mettre les données dans une nouvelle page. Il existe plusieurs façons de le faire, mais voici comment je l'ai fait. Tout d'abord, j'avais un modèle pour la nouvelle section. Je l'ai mis dans une étiquette de script comme ça. J'aime la sémantique de le faire comme ça.

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

Avec cela fait, chaque fois que les données sont chargées, nous pouvons obtenir le HTML brut à partir de cela, et créer les nouveaux éléments en l'alimentant à jQuery à nouveau. Nous ajoutons ensuite les messages à la div avec les posts classe. Nous obtenons également le lien de la page suivante à partir des données pour joindre au lien de la page suivante afin que l'appel ajax précédent fonctionne. Si nous ne trouvons pas le lien de la prochaine page, cela signifie qu'il n'y a plus de messages. Nous pouvons donc cacher le lien de la prochaine page. Nous arrêterons également le lien existant pour charger des données via ajax et faire la chose diapositive normale. Enfin, nous ajouterons la nouvelle section à la division parent des sections, réparons la largeur et ensuite la transition vers la nouvelle 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 

Faire fonctionner la navigation

Je devrais probablement ajouter de nouveaux liens à la navigation, mais je suppose que pour faciliter (et imaginer comment cela ressemble à 40 pages), j'ai décidé d'utiliser une «page suivante» et une «dernière page» pour le contenu chargé. Le code est simple. Pour la page suivante, si ce n'est pas « .static , passez à la section suivante et à la dernière page de ditto. Nous déléguons (techniquement, j'utilise .on() mais les documents sur .delegate semblent plus faciles à comprendre) sur le corps du document afin qu'il fonctionne pour tous les nouveaux liens.

Dans l'ensemble, javascript / jquery ressemblera à

 $(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 

Voici une démonstration en direct de ce travail. Je n'ai vraiment pas gêné de rendre les diapositives sympa mais j'espère que vous avez trouvé cela utile.

Bien sûr, tout doit se produire sur une seule page, ou vous ne pouvez pas avoir exactement la transition. Donc, soit vous chargez tout au moment de l'exécution, soit vous «trichez» en utilisant AJAX.

Modifiez le javascript dans la page pour ce qui suit:

 function bindAnimation(event) { var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); event.preventDefault(); } $(function() { $('ul.nav').on('click','.getNew',getNewSection); $('ul.nav').on('click','a',bindAnimation); }); 

Cela vous permet d'ajouter des éléments dynamiquement aux navigateurs et d'attacher un auditeur d'événements à un nouvel élément que nous utiliserons pour obtenir de nouveaux contenus. Modifiez le menu de navigation afin que le dernier élément ressemble à:

 <li class="getNew">New</li> 

Là. Maintenant, cliquez dessus pour charger le nouveau contenu. Ajoutez ce code javascript à votre site au-dessus du code javascript précédent:

 window.newSectionBlack = false; window.SectionID = 4; function displaySection(data,textStatus, jqXHR) { $('#section3').after(data.html); //add the new section $('#'+data.id).addClass(newSectionBlack ? 'black' : 'white'); newSectionBlack = !newSectionBlack; //style it consistently $('.getNew').before('<li><a href="#'+data.id+'">'+data.name+'</li>'); //attach a link to the new section to the menu $('body').css({width:4000*SectionID}); $('#'+data.id+' ul.nav').on('click','a',bindAnimation); //bind scripts $('#'+data.id+' ul.nav').on('click','.getNew',getNewSection); $('#section1 > ul li:nth-last-child(2) > a').trigger('click'); //go to new SectionID++; } function getNewSection() { $.ajax({ type: "POST", url: 'LoadSection.php', data: {section:SectionID}, success: displaySection, dataType: 'json' }); } 

Ce javascript POSTera un numéro correspondant à quelle section charger sur un nouveau fichier, LoadSection.php, qui doit répondre avec le HTML de la nouvelle section, l'ID et le nom qu'il faut appeler. LoadSection.php peut ressembler à ceci:

 <?php header('Content-Type: application/json'); $send = array(); switch($_POST['section']) { default: $send['html'] = '<div class="section" id="section'.$_POST['section'] .'"><h2>Section ' . $_POST['section'] . '</h2> <p> This is a new section loaded via AJAX, cool huh? </p> <ul class="nav"> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> <li class="getNew">New</li> </ul> </div>'; $send['id'] = 'section'.$_POST['section']; $send['name'] = $_POST['section']; } echo json_encode($send); 

Maintenant, votre page peut charger du contenu de manière dynamique! Notez que la barre de navigation devrait probablement être restructurée pour être un élément absolu qu'il n'y en a qu'une au lieu de répéter sur chaque page, et il y a d'autres choses que vous pouvez nettoyer, mais cela est à prévoir si vous prenez un exemple de codrops.

MODIFIER:

Tumblr ne vous permet pas d'exécuter des scripts sur le serveur sur leur serveur (il est logique), qui sont nécessaires pour que la méthode AJAX décrite ci-dessus fonctionne. Cependant, il existe un certain nombre d'options à votre disposition. 1) redirigez la page tumblr vers un site que vous contrôlez et utilisez la méthode décrite ci-dessus. 2) utiliser un iframe.

La méthode iframe peut être effectuée directement, ce qui vous oblige à préciser les URL de toutes les pages à l'avance (ou au moins elles devront suivre un modèle prévisible), ou utiliser indirectement un script AJAX similaire à celui ci-dessus. Je vais démontrer le chargement d'un iframe direct, je suis sûr que vous pouvez comprendre le reste.

 window.newSectionBlack = false; window.newSectionID = 4; function getNewSection() { $('#section3').after('<div class="section" id="section'+newSectionID+'"><h2>New Section</h2> <iframe src="yourtumbrsite.com></iframe> <ul class="nav"> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> <li class="getNew">New</li> </ul> </div> '); //add the new section $('#section'+newSectionID).addClass(newSectionBlack ? 'black' : 'white'); newSectionBlack = !newSectionBlack; //style it consistently $('.getNew').before('<li><a href="#section'+newSectionID+'">'+newSectionID+</li>'); //attach a link to the new section to the menu $('body').css({width:4000*newSectionID}); $('#'+data.id+' ul.nav').on('click','a',bindAnimation); //bind scripts $('#'+data.id+' ul.nav').on('click','.getNew',getNewSection); $('#section1 > ul li:nth-last-child(2) > a').trigger('click'); //go to new newSectionID++; }