如何显示嵌入的Tumblr帖子的轮播？

Question

有一段时间，我在我的网站上嵌入了3个最新的Tumblr帖子 - 博客图片，标题和帖子网址。

我使用的代码效果很好：

<div class="blog-post-container">    

<!-- Grab the Tumblr content (last three posts) -->    
<script type='text/javascript' src='http://myexampleblog.tumblr.com/js?num=3'></script>

<!-- Only display the blog image, title and post URL -->   
<script type="text/javascript">  
  var i = 0;
  $('.tumblr_post').each(function() {
    var imagesrc = $(this).find('img').first().attr('src') ;
    var titletext = $(this).find('.tumblr_title').text() ;
    $('.blog-post-container').append( "<div class=\"blog-post\"><div class=\"blog-post-image\" style=\"background-image: url(\'" + imagesrc + "\')\"><a class=\"posturl" + i + "\"></a></div><div class=\"blog-post-title\"><a class=\"posturl" + i + "\">" + titletext + "</a></div></div>" );
    $.getJSON('http://myexampleblog.tumblr.com/api/read/json?callback=?',
    function(response) {     
       $('.posturl0' ).attr('href',response.posts[0].url);
       $('.posturl1' ).attr('href',response.posts[1].url);
       $('.posturl2' ).attr('href',response.posts[2].url);
    });
    i=i+1;  
  });
</script>  

<!-- Keep the blog images square -->   
<script type="text/javascript">

  function makeBlogImagesSquare() {
    var blogPostImageWidth = $( '.blog-post' ).width();
    $( '.blog-post-image' ).css( "height", blogPostImageWidth );
  }
  $(document).ready(makeBlogImagesSquare);
  $(window).resize(makeBlogImagesSquare);

</script>

</div>

<style type="text/css">

.tumblr_posts {
  display: none;
}

.blog {
  background: #ffffff;
  padding-bottom: 80px;
}

.blog .row {
  width: 80%;
  margin-left: 10%;
}

.blog-post-container {
  font-size: 0;
  vertical-align: text-top;
}

.blog-post {
  display: inline-block;
  vertical-align: text-top;
  margin: 0 6px 80px 0;
  width: 31%;
}

.blog-post-image {
  display: inline-block;
  background: no-repeat center center;
  background-size: cover;
  width: 100%;
  position: relative;
  box-shadow: inset 0 0 50px rgba(0,0,0,.2);
}

.blog-post-image a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.blog-post-title {
  color: #666666;
  font-size: 21px;
  margin-top: 30px;
  line-height: 140%;
  font-weight: 300;
  padding: 0 40px;
}

@media (max-width : 800px) {
  .blog-post-title {
    font-size: 16px !important;
  }
}

@media (max-width : 600px) {
  .blog-post {
    width: 80%;
  }
  .blog-post-title {
    font-size: 21px !important;
  }
}

.blog-post-title a {
  color: #666666;
}

.blog-post-title a:hover {
  color: #D83C35;
}

</style>

（由于我必须加载所有Tumblr外部资源，我无法让JSFiddle工作：/）。

现在我正在努力制作博客文章（而不仅仅是3）：

• 点击“下一步”按钮，然后加载下3个Tumblr博客帖子（最好是加载，但如果不可能，则只能显示）
• 点击“下一步”后，接下来的3篇博文将取代之前的3篇
• 如果您点击“上一个”，则会显示之前的3个博文

什么是重新调整我的代码的最佳方法 - 或完全放弃 - 实现这个Tumblr post carousel？

我尝试过的东西并没有达到我想要达到的目标，因为我对JavaScript不是很熟练。他们老实说不值得发帖。

先谢谢你的帮助，伙计们！

Answer 1

我知道我在这个派对上已经很晚了，但我刚刚在codepen上做了一个以tumblr为动力的旋转木马，这似乎是分享它的最佳地点！ http://codepen.io/StuffieStephie/pen/pgGGPY/ 这不完全是你想要的（听起来你只是想要照片帖子），但它确实循环通过详细信息的帖子。它还使用了旋转木马插件Slick Slider。 http://kenwheeler.github.io/slick/ 正如你在codepen上看到的那样，我使用for循环来浏览10个最新帖子（尽管你可以改变它）。我使用if语句检查它是否是一个照片帖并将其内容放在一个带有.newsBlock类的div中

if (thisPost["type"]== "photo"){
    var postContent = '<div class="newsBlock"><h2>New Photoset</h2><span class="smallText center"> Posted on ' + postDate +'</span>'+ '<img src="' + thisPost["photo-url-1280"] +'">';

    //IF IT'S A PHOTOSET AND NOT A SINGLE PHOTO
if(thisPost["photos"].length != 0){
    var photosCount = thisPost["photos"].length;
    postContent += '<div class="gallery">'

    for (var cur=1;cur<photosCount;cur++) { 
        postContent +='<img class="gallery-preview" src="'+ thisPost["photos"][cur]["photo-url-250"]+ '">';
    }
    postContent += '</div>'
} 
postContent += thisPost["photo-caption"];
postContent += '<a target="_blank" href="' +thisPost["url-with-slug"]+ '"><i class="fa fa-tumblr-square"></i> View Post on Tumblr</a></div>';
    $("#newsCarousel").append(postContent);

} //END PHOTO POST ELSE IF

然后我将每个.newsBlock附加到＃newsCarousel。 for循环完成后，我在#newsCarousel

上启动光滑滑块

$('#newsCarousel').slick({
slidesToShow: 1, 

//Other options });

我还制作了一个可以鼓舞人心的tumblr动力照片库（带灯箱）http://codepen.io/StuffieStephie/pen/eJMXov

希望有人觉得这很有用！