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

Question

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

我使用的代码运行良好:

<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 篇
• 如果点击“previous”，则显示前 3 篇博文

重新调整我的代码用途(或完全放弃它)以实现此 Tumblr 帖子轮播的最佳方法是什么？

我尝试过的东西与我想要实现的目标相去甚远，因为我对 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 上的光滑 slider

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

//其他选项});

我还制作了一个由 tumblr 驱动的照片库(带有灯箱)，这可能会鼓舞人心 http://codepen.io/StuffieStephie/pen/eJMXov

希望有人觉得这有用!