无限滚动中断闪光

问题描述

我几乎完成下面的创建不倒翁主题。主题使用无限滚动插件，这适用于不包含闪光灯（照片，文字，...）的帖子罚款。视频和音频文章使用闪光灯，当无限滚动踢加载更多的职位，它不会加载在闪光灯的帖子。我不能忍受为什么，任何人都可以请求帮助，因为截止日期即将到来？

解决方案

原来我需要循环通过帖子，并调用tumblr api获取音频帖子的嵌入代码。

我已经把代码放在下面，希望它能帮助别人：

1. 在tumblr主题中有以下的html代码：
   $ b

   {block： $ {
   
   

    < div id ={PostID}class =posts {block：Photo} photo-post {/块：照片} {block：Video} video-post {/ block：Video} {block：Audio} audio-post {/ block：Audio} {block：Photoset} photoset-post {/ block：Photoset}> 
     




2. 然后在回调里面（见下面）进行masonry操作， （b）
   
   $ $ $ $ $ $修复音频播放器
   $（'。audioplayerinto'）。each（function（）{
   var audioID = $（this）.attr（id）;
   var $ audioPost = $（this）;
   $ .ajax（{
   url：'http：// myblog .tumblr.com / api / read / json？id ='+ audioID，
   dataType：'jsonp'，
   timeout：50000，
   success：function（data）{
   
   $ audioPost.html（data.posts [0] [audio-player]）;
   
   $ b / *
   $ audioPost.append（'\ x3cdiv style = \x22background-color：white; height：30px\x22 class = \x22audio_player\x22\x3e'+ data.posts [0] ['audio-player'] +'\x3c / div \x3e'）;
   alert（It worked）;
   * /
   }
   }
   
   
   

   回调代码如下所示：
   
   （$ content.infinitescroll）{
   
   $ content.masonry（{
   itemSelector：'.posts'，
   // $ columnWidth：235，
   isAnimated：true
   }），
   $ content.infinitescroll（{
   navSelector：'div＃pagination'，
   nextSelector：'div＃pagination div＃nextPage a'，
   itemSelector：'.posts'，
   loading：{
   finishedMsg：''，
   img：'http://static.tumblr.com/ dbek3sy / pX1lrx8xv / ajax-loader.gif'
   }，
   bufferPx：500，
   debug：false，
   }，
   //调用石匠作为回调。
   函数（newElements）{
   

   
   

   I am nearly finished creating the tumbler theme below. The theme uses the infinite scroll plugin and this works fine for posts that don't contain flash (photo, text, ...). Video and audio posts use flash and when the infinite scroll kicks in loading more posts it doesn't load in the flash posts. I can't under stand why, can anyone please help as a deadline is looming?

   http://penguinenglishlibrary.tumblr.com/

   解决方案

   Turns out I needed to loop through the posts and call the tumblr api to get the embed code for the audio post.

   I have put the code in below hopefully it will help someone:

   1. I have the folowing html code in the tumblr theme:

      {block:Posts}

      <div id="{PostID}" class="posts {block:Photo}photo-post{/block:Photo} {block:Video}video-post{/block:Video} {block:Audio}audio-post{/block:Audio} {block:Photoset}photoset-post{/block:Photoset}">
      

   2. Then inside the callback (see below) for masonry I have the following code:

      /* repair audio players*/
      $('.audioplayerinto').each(function(){
          var audioID = $(this).attr("id");
          var $audioPost = $(this);
          $.ajax({
              url: 'http://myblog.tumblr.com/api/read/json?id=' + audioID,
              dataType: 'jsonp',
              timeout: 50000,
              success: function(data){
      
                  $audioPost.html(data.posts[0]["audio-player"]);
      
      
                  /*
                  $audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                  alert("It worked");
                  */
              }
          }
      

   The callback code looks like:

   if($content.infinitescroll) {
   
       $content.masonry({
           itemSelector: '.posts',
           //columnWidth: 235,
           isAnimated: true
       }),    
       $content.infinitescroll({
           navSelector    : 'div#pagination',  
           nextSelector   : 'div#pagination div#nextPage a', 
           itemSelector   : '.posts',
           loading: {
               finishedMsg: '',
               img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
           },
           bufferPx       : 500,
           debug          : false,
       },
       // call masonry as a callback.
       function( newElements ) {
   

   这篇关于无限滚动中断闪光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！