Как загрузить содержимое tumblr nextPage в indexPage

Ответ 1

Если я правильно понял ваш вопрос, он упоминается как serakfalcon, но я добавлю в соответствующие моменты. Вам нужно сделать три вещи конкретно. Я не буду вдаваться в слишком много кодов шаблонов tumblr и стилю и придерживаться этих

• Загрузка данных динамически
• Динамическое создание нового раздела/страницы
• Получение навигации для работы с новыми разделами

Загрузка данных

Это на самом деле легкий бит. Для tumblr, как вы упомянули, мы можем перейти на следующую страницу, нажав ссылку "Следующая страница". В tumblr это будет выглядеть как

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

Поскольку страницы находятся в одном домене, мы можем переопределить ссылку, чтобы получить страницу с помощью AJAX. Мы будем получать необработанный HTML для этой страницы. Который будет включать все остальные части страницы, такие как три других раздела. Может быть какая-то магия шаблона tumblr, которую мы можем сделать, чтобы ограничить это, но я буду считать, что вне сферы действия. Итак, как мы получаем контент конкретно? Мы можем комбинировать исходный HTML-код в jquery, чтобы он мог создавать объекты документа, и затем мы можем выбрать контент, в котором есть почта. Так что-то вроде.

$(document.body).on('click',".static",function(e){ //delegated
    var xhr=$.get($(this).attr("href"),function(a){ //a is next page HTML
        $loaded=$(a); //loaded now has a temporary object with next page 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"
    })
})

Создание нового раздела/страницы

Как только мы получим данные, нам нужно будет поместить данные на новую страницу. Там много способов сделать это, но здесь, как я это сделал. Прежде всего, у меня был шаблон для нового раздела. Я поместил его в тег script, как это. Я вроде как семантика делаю это так.

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

С учетом этого, всякий раз, когда данные загружаются, мы можем получить необработанный HTML из этого и создать новые элементы, снова загрузив его в jQuery. Затем мы добавляем сообщения в div с классом posts. Мы также получаем ссылку следующей страницы из данных для присоединения к следующей странице, чтобы предыдущий аякс-вызов работал. Если мы не можем найти ссылку на следующую страницу, это означает, что больше нет сообщений. Таким образом, мы можем скрыть ссылку следующей страницы. Мы также остановим существующую ссылку для загрузки данных через ajax и сделаем обычную слайд-вещь. Наконец, мы добавим новый раздел в родительский div разделов, исправим его ширину, а затем перейдем в новый раздел.

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

Получение навигации для работы

Я, вероятно, должен добавить новые ссылки на навигацию, но я думаю, чтобы упростить (и представить, как это выглядит с 40 страницами), я решил просто использовать "следующую страницу" и "последнюю страницу" для загруженного контента, Код прост. Для следующей страницы, если это не .static, перейдите к следующему разделу и последней странице. мы delegate (технически я использую .on(), но документы на .delegate казались более понятными), это чтобы он работал для всех новых ссылок.

Итак, в целом javascript/jquery будет выглядеть примерно как

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

Здесь находится живая демонстрация. На самом деле не позаботились о том, чтобы слайды выглядели хорошо, но, надеюсь, вы нашли это полезным.

Ответ 2

Конечно, все должно произойти на одной странице, или вы не можете точно перейти к переходу. Таким образом, вы загружаете все во время выполнения или обманываете AJAX.

измените встроенный javascript на следующее:

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

Это позволяет динамически добавлять элементы в навигаторы и присоединяет прослушиватель событий к новому элементу, который мы будем использовать для получения нового контента. Измените навигационное меню так, чтобы последним элементом было что-то вроде:

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

Там. теперь нажатие на это приведет к загрузке нового контента. добавьте этот код javascript на свой сайт над предыдущим кодом javascript:

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

В этом javascript будет POST номер, соответствующий тому, какой раздел загружается в новый файл LoadSection.php, которому необходимо ответить HTML-кодом нового раздела, идентификатором и именем, которое должно быть вызвано. loadSection.php может выглядеть следующим образом:

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

Теперь ваша страница может динамически загружать контент! Обратите внимание: панель навигации, вероятно, должна быть перестроена, чтобы быть абсолютным элементом, в котором есть только один, а не повторяющийся на каждой странице, а также другие вещи, которые вы можете очистить, но это следует ожидать, если вы принимаете пример codrops.

EDIT:

tumblr не позволяет запускать серверные сценарии на своем сервере (имеет смысл), которые необходимы для описанного выше метода AJAX. Тем не менее, есть несколько вариантов, доступных вам. 1) перенаправить страницу tumblr на сайт, который вы контролируете, и использовать описанный выше метод. 2) используйте iframe.

Метод iframe может быть выполнен напрямую, что требует, чтобы вы заранее указали URL-адреса всех страниц (или, по крайней мере, они должны были следовать предсказуемому шаблону) или косвенно использовать AJAX script, аналогичный один выше. Я продемонстрирую загрузку прямого iframe, я уверен, что вы можете выяснить остальное.

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