Tumblr Audio Player nicht mit endlosen Scroll Laden

Question

ich unendlich scroll zusammen mit Mauerwerk auf dieser tumblr umgesetzt: [Check Revision für link]

Der Audio-Player in Beiträgen nicht angezeigt durch unendliche Scroll geladen, stattdessen zeigt es den Text „[Flash 9 erforderlich ist, um Audio zu hören.]“

Die Inspire Nun tumblr Thema (ich einen anderen Hyper-Link nicht posten kann, aber man kann es leicht googeln) scheint durch diesen Code, um dieses Problem gelöst zu haben:

if(InspireWell.infiniteScrolling && InspireWell.indexPage){ 
    $masonedColumn.infinitescroll({ 
    navSelector : 'ul.page_nav', // selector for the paged navigation 
    nextSelector : 'ul.page_nav li.page_next a', // selector for the NEXT link (to page 2) 
    itemSelector : '.post',  // selector for all items you'll retrieve 
    loadingImg : '', 
    donetext : 'No more pages to load.', 
    errorCallback: function() { 
     // fade out the error message after 2 seconds 
     //$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal'); 
    } 
    }, 
    // call masonry as a callback 
    function(newElements) { 

    $(newElements).css({ visibility: 'hidden' }); 

    $(newElements).each(function() { 
     if($(this).hasClass("audio")){ 
     var audioID = $(this).attr("id"); 
     var $audioPost = $(this); 
     $audioPost.find(".player span").css({ visibility: 'hidden' }); 

     var script=document.createElement('script'); 
     script.type='text/javascript'; 
     script.src="http://assets.tumblr.com/javascript/tumblelog.js?16"; 

     $("body").append(script); 

     $.ajax({ 
     url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID, 
      dataType: "jsonp", 
      timeout: 5000, 
      success: function(data){ 
      $audioPost.find(".player span").css({ visibility: 'visible' }); 
      $audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>'); 
      } 
     }); 
     } 
    }); 

Ich habe versucht, dies anzupassen fo r mein tumblr (mit Platzhalter-Text zu sehen, ob es das richtige Element wurde zu finden):

$(window).load(function(){ 
    $('#allposts').masonry({ 
    singleMode: true, 
    itemSelector: '.box' 
    }); 
    $('#allposts').infinitescroll({ 
    navSelector : "div.navigation", 
    nextSelector : "div.navigation a:first", 
    itemSelector : ".box", 
    debug : true 
    }, 
    function(newElements) { 
     $(this).masonry({ appendedContent: $(newElements) }); 
     $(newElements).each(function(){ 
     if($(this).hasClass("audio")){ 
      var audioID = $(this).attr("id"); 
     var $audioPost = $(this); 
     $audioPost.find(".audio span"); 
      var script=document.createElement('script'); 
      script.type='text/javascript'; 
      script.src="http://assets.tumblr.com/javascript/tumblelog.js?16"; 
      $("body").append(script); 
     $.ajax({ 
     url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID, 
    dataType: "jsonp", 
    timeout: 5000, 
    success: function(data){ 
     $audioPost.find(".audio span"); 
     $audioPost.find("span:first").append("<p>audio player not working</p>"); 
     } 
     }); 
     } 
     }); 
    } 
    ); 
}); 

Aber es gibt kein Zeichen des Textes. Jede Hilfe würde sehr geschätzt werden.

Answer 1

html

<div class="audio" id="{postID}">{AudioPlayerBlack}</div> 

css

.audio { 
     height:30px; 
     overflow-y: hidden; 
    } 
.audio span { 
     display:none; 
    } 

java

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


        }, 2000); 

Answer 2

Hier ist eine Lösung kam ich mit, wenn ich benötigt, um die gleiche Funktionalität in der Vorlage zu implementieren ich war die Schaffung .

Fügen Sie in Ihrem HTML Ihren AudioPlayer Tumblr-Tag zwischen Kommentaren ein. Dies soll verhindern, dass geladene Skripte aufgerufen werden. Fügen Sie auch eine Klasse "unloaded" hinzu, um zu verfolgen, ob wir den Audio Player für diesen Post geladen haben oder nicht.

... 
{block:AudioPlayer} 
    <div class="audio-player unloaded"> 
     <!--{AudioPlayerBlack}--> 
    </div> 
{/block:AudioPlayer} 
... 

Wenn man sich den kommentierten Code aussehen, nachdem die Seite geladen wird, werden Sie einen embed-Tag feststellen zu einem der Tumblr JavaScript-Funktionen übergeben wird. Da wir es kommentiert haben, wird es nicht ausgeführt. Stattdessen werden wir diese Zeichenfolge extrahieren und den div-Inhalt damit ersetzen wollen.

Erstellen Sie eine JavaScript-Funktion, die dies tun wird. Dies kann mit regelmäßigen Javascript getan werden, aber um Zeit zu sparen ich es mit jQuery tun werde, da dies, wie ich tat es für meine Vorlage:

function loadAudioPosts() { 
    // For each div with classes "audio-player" and "unloaded" 
    $(".audio-player.unloaded").each(function() { 

     // Extract the <embed> element from the commented {AudioPlayer...} tag. 
     var new_html = $(this).html().substring(
      $(this).html().indexOf("<e"), // Start at "<e", for "<embed ..." 
      $(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>" 
     ); 

     // Replace the commented HTML with our new HTML 
     $(this).html(new_html); 

     // Remove the "unloaded" class, to avoid reprocessing 
     $(this).removeClass("unloaded"); 
    }); 
} 

Anruf loadAudioPosts() einmal beim Laden der Seite, dann jedes Mal Ihrer unendlichen Scrollen Lasten zusätzliche Beiträge.