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模板代码并设计样式并坚持使用这些

动态加载数据
动态创建新的部分/页面
让导航与新章节一起使用

加载数据

这实际上很容易。对于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来创建新元素。然后，我们会将帖子附加到div，其中包含课程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，请转到下一部分并同上最后一页。我们delegate（技术上，我正在使用.on()，但.delegate上的文档似乎更容易理解）文档正文，以便它适用于所有新链接。< / p>

因此整个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

这是 live demo 的工作原理。没有真正打扰让幻灯片看起来不错，但希望你发现这很有帮助。

Answer 2

当然，一切都必须在一个页面上进行，否则您无法完全实现转换。所以，要么你在运行时加载所有内容，要么你作弊＆＃39;使用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（或者至少它们需要遵循可预测的模式），或间接使用类似于一个在上面。我将展示加载一个直接的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++;
}

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

2 个答案:

加载数据

创建新的部分/页面

让导航工作