如何在indexPage上加载tumblr nextPage的内容

Question

我正在为我的个人作品集开发一个tumblr主题,但是我在工作部分遇到了一个严重的问题,我想创建一个水平滑块效果,当我点击下一个以查看较旧的帖子时,

像这样:

http://tympanus.net/Tutorials/WebsiteScrolling/

我有这个来定义我的nextPage,#section4是我的工作帖子:

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

好吧,这被定义为打开另一个页面:

"indexPage".tumblr.com#section4

当我点击下一步它去:

"indexPage".tumblr.com/page/2#section4

有没有办法可以在我的索引页面上做这个幻灯片效果,或者至少给人一种错觉,我正在制作幻灯片效果,当移动到其他页面时？

Answer 1

如果我正确理解你的问题,就像serakfalcon提到的那样,但我会添加tumblr特定点.你需要专门做三件事.我不会进入太多的tumblr模板代码并对其进行样式化并坚持使用这些代码

1. 动态加载数据
2. 动态创建新的部分/页面
3. 让导航与新部分一起使用

加载数据

这实际上很容易.对于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'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"
    })
})

创建新的部分/页面

获得数据后,我们现在需要将数据放入新页面.有很多方法可以做到这一点,但这就是我如何做到这一点.首先,我有一个新部分的模板.我把它放在一个像这样的脚本标签中.我有点像这样做的语义.

<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来创建新元素.然后我们将帖子附加到divwith class posts.我们还从数据中获取下一页链接以附加到下一页链接,以便早期的ajax调用可以工作.如果我们找不到下一页的链接,那就意味着没有更多的帖子了.所以我们可以隐藏下一页链接.我们还将停止现有链接以通过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,请转到下一部分,然后转到最后一页.我们将委托(技术上,我正在使用,.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

这是一个有效的现场演示.没有真正打扰让幻灯片看起来不错,但希望你发现这很有帮助.

Answer 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,它应该被调用的ID和名称.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);

现在,您的页面可以动态加载内容!请注意,导航栏可能应该重新构造为一个绝对元素,只有一个而不是在每个页面上重复,并且还有其他东西可以清理,但如果您正在考虑一个代码示例,则可以预期.

编辑:

tumblr不允许您在其服务器上运行服务器端脚本(有意义),这是上述AJAX方法工作所必需的.但是,您可以使用多种选项.1)将tumblr页面重定向到您控制的站点,并使用上述方法.2)使用iframe.

iframe方法可以直接完成,这需要您提前指定所有页面的URL(或者至少它们需要遵循可预测的模式),或间接使用类似于上面的AJAX脚本.我将演示加载一个直接的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++;
}